Html 如何使用CSS在水平列表项中使用分词

我想创建一个水平列表，并在li中启用分词

下面的示例输出如下：

|---------element width---------|
abcdefghij ABCDEFGHIJ 
aaaaaaaaaaaaaaaaaaaaaaaaaa   

这就是我想要的：

|---------element width---------|
abcdefghij ABCDEFGHIJ aaaaaaaaaa
aaaaaaaaaaaaaaaa   

我试着用float left，其他的分词css，指定宽度或最大宽度，等等

---

li{display:inline块；word break:break all；}

abcdefghij
ABCDEFGHIJ
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

要获得您想要的结果，您必须使用

wordwrap:break-word

---

自动换行有4个值：

wrap:normal | break word | initial | inherit

但在您的示例中，您已经标记了
display:inline块

所以
wordwrap:break-word
将起作用。请实现这一点，以便解决方案

您需要将父级
与
单词break:break all
属性放在一起，该属性将在子元素溢出时中断子元素。子
元素需要使用
block:inline
属性进行设置，以使它们显示在一行中


ul{
宽度：250px；
单词break：打破一切；
}
李{
显示：内联；
}

断字测试

abcdefghij
ABCDEFGHIJ
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

挑战在于使
li
元素在元素到达边界后开始内联和换行。见问题<代码>换行：断开单词
无法满足需要的问题。这里有一个小提示…如果在最后一个
aaaaaaaaaaaaaaaaaaaaaaaa
之后有一个新的li元素，那么它应该如何显示{显示：内联块；换行：断开单词；宽度：100px；浮点：左；}但是每个li都有自己的块，所以它将在它们特定的li块中换行。我定义了宽度并设置了float:left。