Question

我想将一些文本包装到我在LI中保存的下一行 - 包装需要动态完成所以我正在寻找CSS

我希望它看起来像这样：

<ul>
    <li> normal sized </li>
    <li> big massive long one that i'd like to wrap to the next line like below </li>
    <li> the result that
            i'd like to see </li>
</ul>

我不想要任何滚动条，我不希望它离开页面，并且在CSS中设置UL或LI的宽度似乎不适合我。有任何想法吗？我确定它缺少一些微不足道的东西

由于

编辑：我已经尝试过这些解决方案而没有任何运气 - 他们自己工作正常。所以我必须得出结论，问题出在我正在使用的jQuery代码中。（使用名为jqueryFileTree的插件）。代码提取了一个文件名，因此可能存在打破行

的问题

Answer 1

设置ul元素的宽度应该可以解决问题。我尝试了你的基本示例，它适用于FF3，IE 5.5-8。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>test</title>
        <style type="text/css" media="screen">
            ul {
                width: 80px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li> normal sized </li>
            <li> big massive long one that i'd like to wrap to the next line like below </li>
            <li> the result that i'd like to see </li>
        </ul>
    </body>
</html>

Answer 2

当文本到达视口末端（浏览器中的“查看区域”）或其元素指定宽度的末尾时，文本将自行封装，根本不应用CSS。这适用于所有元素，只要它们最初不是绝对位于视口之外。

我必须说我想知道你实际上如何使文本延伸到UL / LI的视口或宽度之外。

Answer 3

如何设置元素的宽度？

以下内容不起作用：

<ul width="100">
    <li>Normal Sized</li>
    <li>Big massive long one that I'd like to wrap to the next line</li>
    <li>The result I'd like to see</li>
</ul>

您需要在CSS或标签上的样式属性中设置宽度：

<ul style="width: 100px;">
    <li>Normal Sized</li>
    <li>Big massive long one that I'd like to wrap to the next line</li>
    <li>The result I'd like to see</li>
</ul>

或者您可以创建一个css类，而不是为页面上的每个ul设置宽度：

<style type="text/css" media="screen">
    .smallList {
        width: 100px;
    }
</style>

<ul class="smallList">
    <li>Normal Sized</li>
    <li>Big massive long one that I'd like to wrap to the next line</li>
    <li>The result I'd like to see</li>
</ul>

UL中的“自动换行”LI

3 个答案: