頁:
[1]
簡單的問題: 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>
...<div class='locked'><em>瀏覽完整內容，請先 <a href='member.php?mod=register'>註冊</a> 或 <a href='javascript:;' onclick="lsSubmit()">登入會員</a></em></div><div></div> 本帖最後由 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; 即可，下面附上預覽圖
...<div class='locked'><em>瀏覽完整內容，請先 <a href='member.php?mod=register'>註冊</a> 或 <a href='javascript:;' onclick="lsSubmit()">登入會員</a></em></div> chengpocheng 發表於 2017-4-24 09:55 AM static/image/common/back.gif
在li的CSS的樣式裡補上 word-wrap:break-word; 即可，下面附上預覽圖
感激不盡啊,爬文爬好久了,沒想到真的可以用了,謝謝.
上課的時候老師沒有特別提到,只是他教的時候用中文就可以??難道中文跟英文不一樣? hidrate 發表於 2017-4-24 10:19 PM static/image/common/back.gif
感激不盡啊,爬文爬好久了,沒想到真的可以用了,謝謝.
上課的時候老師沒有特別提到,只是他教的時候用中文就 ...
英文你打一堆字母，字母中間又沒有空白，他認為是這串英文是同一個字。英文如果同一個字被斷行很奇怪，不好閱讀，所以預設不會斷行。
你打正常的英文文章，中間會有空白，他就會自動斷行了。
中文的話每個字佔的寬度一樣，不會有同一個字佔很長空間沒辦法斷行的問題。
...<div class='locked'><em>瀏覽完整內容，請先 <a href='member.php?mod=register'>註冊</a> 或 <a href='javascript:;' onclick="lsSubmit()">登入會員</a></em></div>
頁:
[1]