今天群裡有人問了個問題：在固定寬度的塊級元素中，裡面的內容最後一片語在寬度不夠的情況下沒有換行，如何讓它換到下一行？這裡我整理了下群裡的方法，分享給大家。
首先給出問題，截圖如下：
>固定寬度文字換行
title
>
<
style
type
="text/css"
>
*body
aa:hover
.demo
style
>
head
>
<
body
>
<
p class
="demo"
>
<
a href
="#"
>測試
a>
<
a href
="#"
>測試
a>
<
a href
="#"
>測測試試
a>
<
a href
="#"
>測試
a>
<
a href
="#"
>測試
a>
<
a href
="#"
>測測試試
a>
<
a href
="#"
>測試
a>
p>
body
>
html
>
我們可以看出第一行和第二行由於寬度不夠導致片語斷開了。
解決此問題有兩種方法。
方法一：display:inline-block;
html **：
doctype html
>
<
html
lang
="en-us"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>固定寬度文字換行
title
>
<
style
type
="text/css"
>
*body
aa:hover
.demo
.demo1 a
style
>
head
>
<
body
>
<
p class
="demo demo1"
>
<
a href
="#"
>測試
a>
<
a href
="#"
>測試
a>
<
a href
="#"
>測測試試
a>
<
a href
="#"
>測試
a>
<
a href
="#"
>測試
a>
<
a href
="#"
>測測試試
a>
<
a href
="#"
>測試
a>
p>
body
>
html
>
html **：
doctype html
>
<
html
lang
="en-us"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>固定寬度文字換行
title
>
<
style
type
="text/css"
>
*body
aa:hover
.demo
.demo2 a
style
>
head
>
<
body
>
<
p class
="demo demo2"
>
<
a href
="#"
>測試
a>
<
a href
="#"
>測試
a>
<
a href
="#"
>測測試試
a>
<
a href
="#"
>測試
a>
<
a href
="#"
>測試
a>
<
a href
="#"
>測測試試
a>
<
a href
="#"
>測試
a>
p>
body
>
html
>
CSS文字換行始末
昨天我在編輯某個網頁的時候,某種原因長按了乙個字母，結果發生下圖這樣的事情 內容已經被我重新修改過，但是原文還是跟它一樣，有一長串英文，然後是中文，接著是一段規則的英文 對此在csdn請教了高手，原來瀏覽器是把那一長串的英文當做了乙個單詞。對此，我作了乙個極端的測試，就是在一長串英文中間加入標點符號...
css限制文字換行
css 設定文字只顯示一行，多餘顯示省略號 view text顯示多行 思路 1.超出的文字隱藏 2.溢位用省略號顯示 3.溢位不換行 4.將物件作為彈性伸縮盒子模型顯示 5.從上到下垂直排列子元素 設定伸縮盒子的子元素排列方式 6.這個屬性不是css的規範屬性，需要組合上面兩個屬性，表示顯示的行數...
css控制文字換行
設定為break word時，文字中的長單詞或url可以換行 換行換行換行換行換行換行換行換行aaaaaaaaaaaaaaaa 新增換行後的效果 若css不設定word wrap，遇到長單詞時內容溢位，效果如圖所示 設定為break all時，文字遇到長單詞，會選擇在合適的位置截斷進行換行 換行換行...