在UL中“自動換行” LI
[英]“word-wrap” an LI within a UL
問題描述
我想將一些文本包裝到保存在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的插件）。 該代碼提取了一個文件名，因此斷行可能存在問題
3 個解決方案
解決方案1
10 已采納 2009-04-03 13:46:23
在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
3 2009-04-03 13:46:37
當文本到達視口的末尾（瀏覽器中的“查看區域”）或其元素的指定寬度的末尾時，文本將被自身完全包裹，而無需應用CSS。 這適用於所有元素，只要它們最初並不是絕對位於視口之外即可。
我必須說，我想知道您實際上是如何使文本超出UL / LI的視口或寬度的。
解決方案3
1 2009-04-03 13:49:34
如何設置元素的寬度？
以下內容不起作用：
<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或標記的style屬性中設置寬度：
<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>
如何自動換行URL？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.