微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

我正在使用 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>

如何让文字换行?

解决方法

类似的东西?

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?