Question

<ul class="notice-ul">
<li class="notice-word-wrap">Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered</li>
<li>Delivered</li>
</ul>

上面是我在html中的无序列表。 css为上述：

.notice-ul{
    list-style: none;
}

.notice-ul > li:before { 
 content:"\2713\0020"; 
 } 

.notice-word-wrap{
    display: block; 
    width: auto;
    height: auto;
    word-break: break-all;
    word-wrap: break-word; 
    white-space: normal
}

我在这里遇到的问题是关于第一个列表的包装，其中单词没有正确破坏。附上上述结果：Result in UI

Answer 1

在逗号之后（以及单词之间）添加空格应该使文本流和换行正常在html中。

Answer 2

你可以包装所有＆＃34;不应该破坏＆＃34; span 标记和样式 span 元素的部分不易破碎。

e.g。

<li class="notice-word-wrap"><span>Delivered,</span><span>Delivered,</span><span>Delivered,</span><span>Delivered,</span><span>Delivered,</span><span>Delivered,</span><span>Delivered,</span><span>Delivered,</span>Delivered</li>

然后在你的CSS中

span{
       word-break: normal;
    word-wrap: normal; 
}

这样可以防止单词破坏，但需要一些内容装饰。

Answer 3

无序列表是标有粗体点（通常是黑色小圆圈）的项目的列表。使用标签的无序列表

语法：

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

For More Click

在html中的无序列表中包装的单词

3 个答案: