在 UL 中“自动换行”一个 LI答案

【问题标题】："word-wrap" an LI within a UL在 UL 中“自动换行”一个 LI
【发布时间】：2010-10-17 08:52:58
【问题描述】：

我想将一些文本换行到我在 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 的插件）。该代码提取了一个文件名，因此可能存在断行问题

【问题讨论】：

您能否就您所经历的事情提供更多背景信息？浏览器，也许还有更多代码？
你的意思是也有那个缩进吗？这基本上是不可能的/不是 x-browser/需要 JS 或额外的标记，如果是这样的话。

标签： jquery html css

【解决方案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>

【讨论】：

【解决方案2】：

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

我必须说，我想知道您实际上是如何使文本超出 UL/LI 的视口或宽度的。

【讨论】：

【解决方案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>

【讨论】：

我确定您的意思是 .smallList 而不是 #smallList 在您的风格中。