CSS3實現自動換行效果的方法

這篇文章主要介紹了CSS3實現自動換行效果的方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

成都創新互聯公司是一家朝氣蓬勃的網站建設公司。公司專注于為企業提供信息化建設解決方案。從事網站開發，網站制作，網站設計，網站模板，微信公眾號開發，軟件開發，微信平臺小程序開發，10年建站對軟裝設計等多個方面，擁有豐富的網站設計經驗。

CSS3中要實現自動換行的效果可以通過word-break屬性或者word-wrap屬性來實現。

在CSS3中有一個新的屬性可以讓文本自動換行，尤其在內容多的文本中換行是一件很重要的事。

word-break屬性

自動換行屬性，使用word-break屬性，可以讓瀏覽器實現在任意位置換行

它有三個屬性值分別為：

normal：瀏覽器中的默認換行行為

break-all：可允許在單詞內換行

keep-all：只能在半角空格或連字符處進行換行

例：

<style>
.p1{
width:200px;
border:1px solid #ccc;
word-break:normal;
}

.p2{
width:200px;
border:1px solid #ccc;
word-break:keep-all;
}

.p3{width:200px;
border:1px solid #ccc;
word-break:break-all;
}
</style>
</head>
<body>
<p class="p1">Php Chinese website provides a large number of free, original, high-definition php video tutorials.</p>
<p class="p2">Php Chinese website provides a large  &nbsp;number of free, original, high-definition php video tutorials.</p>
<p class="p3">Php Chinese website provides a large number of free, original, high-definition php video tutorials.</p>
</body>

效果圖如下

CSS3實現自動換行效果的方法

work-wrap屬性

允許長單詞或 URL 地址換行到下一行

它有兩個屬性值，分別為

normal：只能允許在斷字點處進行換行是瀏覽器的默認行為

break-word：可以允許在長單詞或者URL地址的內部進行換行

例：

<style>
.p1{width:200px;
border:1px solid #ccc;
word-wrap:normal;
}
.p2{
width:200px;
border:1px solid #ccc;
word-wrap:break-word;
}
</style>
</head>
<body>
<p class="p1">PhpChinesewebsiteprovidesalargenumber of free, original, high-definition php video tutorials.</p>
<p class="p2">PhpChinesewebsiteprovidesalargenumber of free, original, high-definition php video tutorials.</p>
</body>

效果圖如下：

CSS3實現自動換行效果的方法