Question

我希望li下的元素显示在单行中。如果字符超过div的长度，那么它应该换行。

这是我小提琴的链接。

现在我希望在那个div中，我在li元素中的所有元素应该是相同的。例如：

O 1.abcdefghijklmnopqrstuvwxyz
O 2. 12345678901234567890

并且喜欢那样。现在我们可以看到它超过了div的长度所以我想像这样包装它。

O 1. abcdefghijklmnopqrstuv
     wxyz
O 2. 12345678901234567890

我该怎么做？

Answer 1

你可以添加这个

span {
   display: inline-block;
   word-break:break-all; /* add this */
}

JSfiddle Demo

Answer 2

你可以使用下面的CSS：

span {
    display: block;
    word-break: break-all;
}

另外，鉴于您有效地再次对列表进行编号，为什么不使用有序列表（<ol>）标签而不是使用无序列表（<ul>），然后为其添加额外的跨度编号

我建议使用以下标记：

<div>
    <ol>
        <li>abcdefghijklmnopqrstuvwxyz</li>
        <li>123456789012345678901234567890</li>
    </ol>
    <ol>
        <li>abcdefghijklmnopqrstuvwxyz</li>
        <li>123456789012345678901234567890</li>
    </ol>
</div>

<强> CSS：

div {
   right: 0px;
   width: 200px;
   border: double;
   position: absolute;
}

li {
    word-break: break-all;
}

Demo

注意：您可能想在when to use UL or OL in html?上引用此帖子。但是这个答案和Paulie_D发布的答案的关键在于两者都使用word-break属性。

更新：要在溢出时将整个字环绕到下一行，您可以使用以下设置。

li {
    word-wrap: break-word;
    /* Webkit supports word-break: break-word; also but it seems to be non-standard */
}

Updated Demo

Answer 3

你知道你可以有一个带有数字的有序列表，例如http://www.w3schools.com/cssref/playit.asp?filename=playcss_ol_list-style-type&preval=decimal-leading-zero

例如

HTML

<ol>
    <li> jguhiuo</li>
    <li> jhii</li>
</ol>

CSS

 ol#myList
{
list-style-type:decimal;
}

链接 http://jsfiddle.net/NmhB5/5/

如何将li元素下的元素保持在同一行？

3 个答案: