如何解决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 举报,一经查实,本站将立刻删除。