问语义-UI/Fomantic-UI:如何向列表项添加换行符
EN

Stack Overflow用户

提问于 2021-01-26 21:19:52

回答 1查看 110关注 0票数 1

我正在使用Fomantic(语义-UI)。我有一个列表，其中包括一个头像，一个文本和一个按钮。当文本太宽以适合一行时，它应该换到第二行。相反，整条线会在头像和按钮下面换一条新的线。见下面的小提琴：

https://jsfiddle.net/j2pguvko/8/

<body>
  <div class="ui list" style="width: 140px">
    <div class="item">
      <a class="right floated content">
        <i class="trash icon"></i>
      </a>
      <img class="ui avatar image">
      <div class="content">
        Blabla blabla      
      </div>
    </div>
  </div>
</body>

我怎样才能使文字包装？

semantic-ui

fomantic-ui

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-02-07 12:03:21

像这样吗？

对文本进行调整，并使图像浮动。

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.css" integrity="sha512-g/MzOGVPy3OQ4ej1U+qe4D/xhLwUn5l5xL0Fa7gdC258ZWVJQGwsbIR47SWMpRxSPjD0tfu/xkilTy+Lhrl3xg==" crossorigin="anonymous" />
  <style> 
        img { 
            float: left;  
            margin: 5px; 
        } 
        p { 
            text-align: justify;  
        } 
    </style> 
</head>

<body>
  <div class="ui list" style="width: 140px">
    <div class="item">
      <a class="right floated content">
        <i class="trash icon"></i>
      </a>
      <img class="ui avatar image">
      <p>
        Blabla blabla asjd aejhfk jihas wknik kjanwk nlsajn 
      </p>  
    </div>
  </div>
</body>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65909439

复制

相似问题

问语义-UI/Fomantic-UI:如何向列表项添加换行符
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问语义-UI/Fomantic-UI:如何向列表项添加换行符EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问语义-UI/Fomantic-UI:如何向列表项添加换行符
EN