Semantic-UI/Fomantic-UI: 如何给列表项添加换行符

Question

我正在使用 Semantic-UI (Semantic-UI)。我有一个列表，其中包含一个头像、一个文本和一个按钮。当文本太宽无法放在一行时，它应该换行到第二行。但是，整行换行到头像和按钮下的新行。请参阅下面的 fiddle：

<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>

如何让文字换行？

Answer 1

是这样的吗？

对齐文本，并使图像浮动。:

<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>

Semantic-UI/Fomantic-UI: 如何给列表项添加换行符

Semantic-UI/Fomantic-UI: How to add a linebreak to a list item

semantic-ui

fomantic-ui