1

我正在使用 Fomantic-UI（语义-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>

如何使文本换行？

4

1 回答 1

0

像这样的东西？

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

<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>
于 2021-02-07T12:03:21.247 回答