伊莉討論區

標題: 簡單的問題: Li的內容換行 [打印本頁]

作者: hidrate 時間: 2017-4-22 08:10 AM 標題: 簡單的問題: Li的內容換行

本帖最後由 hidrate 於 2017-4-30 09:20 PM 編輯

問個簡單的問題

我想要讓li會因為內容過多而自動換行,可是它總是全部顯示在同一列不換行,我有設定父標籤ul的寬度是200px,但是ul底下的li即使內容很多,也不會因此而換行...請問各位先進,我哪裡需要改寫...

(我是用chrome,FF去跑下面的網頁的)
程式內容如下:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
*{margin:0 auto;padding: 0;}
ul{width:200px;height:200px;border:1px solid black;}
li{list-style: none;}
</style>
</head>
<body>
<ul>
<li>asdfasfdasfsafdsafsafhetryertyeryreyrytreyetrjemememesdsdsdsdsdd</li>
</ul>
</body>
</html>

複製代碼

作者: chengpocheng 時間: 2017-4-24 09:55 AM

本帖最後由 chengpocheng 於 2017-4-24 09:58 AM 編輯

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
*{margin:0 auto;padding: 0;}
ul{width:200px;height:200px;border:1px solid black;}
li{list-style: none;word-wrap:break-word;}
</style>
</head>
<body>
<ul>
<li>asdfasfdasfsafdsafsafhetryertyeryreyrytreyetrjemememesdsdsdsdsdd</li>
</ul>
</body>
</html>

複製代碼

在li的CSS的樣式裡補上 word-wrap:break-word; 即可，下面附上預覽圖

作者: hidrate 時間: 2017-4-24 10:19 PM

chengpocheng 發表於 2017-4-24 09:55 AM
在li的CSS的樣式裡補上 word-wrap:break-word; 即可，下面附上預覽圖

感激不盡啊,爬文爬好久了,沒想到真的可以用了,謝謝.
上課的時候老師沒有特別提到,只是他教的時候用中文就可以??難道中文跟英文不一樣?

作者: 雲響 時間: 2017-7-28 02:10 AM

hidrate 發表於 2017-4-24 10:19 PM
感激不盡啊,爬文爬好久了,沒想到真的可以用了,謝謝.
上課的時候老師沒有特別提到,只是他教的時候用中文就 ...

英文你打一堆字母，字母中間又沒有空白，他認為是這串英文是同一個字。英文如果同一個字被斷行很奇怪，不好閱讀，所以預設不會斷行。

你打正常的英文文章，中間會有空白，他就會自動斷行了。

中文的話每個字佔的寬度一樣，不會有同一個字佔很長空間沒辦法斷行的問題。

歡迎光臨伊莉討論區 (http://blog.eyny.com/)