這篇文章主要介紹了設置css文本自動換行的方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
CSS3包含幾個額外的功能，如下：
1.文本溢出
2.自動換行
3.字斷
CSS3中有以下最常用的屬性：
1.文本溢出
文本溢出屬性確定如何向用戶發出未顯示的溢出內容的信號。文本溢出的示例示例如下所示 ：
<html>
<head>
<style>
p.text1 {
white-space: nowrap;
width: 500px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.text2 {
white-space: nowrap;
width: 500px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<b>測試1</b>
<p>
億速云提供大量免費、原創、高清的php視頻教程，并定期舉行公益php培訓！可邊學習邊在線修改示例代碼，查看執行效果！php從入門到精通，一站式php自學平臺！
</p>
<b>測試2</b>
<p class = "text1">
億速云提供大量免費、原創、高清的php視頻教程，并定期舉行公益php培訓！可邊學習邊在線修改示例代碼，查看執行效果！php從入門到精通，一站式php自學平臺！
</p>
<b>測試3</b>
<p class = "text2">
億速云提供大量免費、原創、高清的php視頻教程，并定期舉行公益php培訓！可邊學習邊在線修改示例代碼，查看執行效果！php從入門到精客家話通，一站式php自學平臺！
</p>
</body>
</html>2.自動換行：
自動換行用于打破行并換行到下一行。以下代碼將包含示例語法 ：
p {
word-wrap: break-word;
}下面的代碼顯示了斷字的示例代碼：
顯示效果如下：
<html>
<head>
<style>
p.text1 {
width: 140px;
border: 1px solid #000000;
word-break: keep-all;
}
p.text2 {
width: 140px;
border: 1px solid #000000;
word-break: break-all;
}
</style>
</head>
<body>
<b>測試1</b>
<p class = "text1">
億速云提供大量免費、原創、高清的php視頻教程，并定期舉行公益php培訓！可邊學習邊在線修改示例代碼，查看執行效果！php從入門到精通，一站式php自學平臺
</p>
<b>測試2</b>
<p class = "text2">
億速云提供大量免費、原創、高清的php視頻教程，并定期舉行公益php培訓！可邊學習邊在線修改示例代碼，查看執行效果！php從入門到精通，一站式php自學平臺
</p>
</body>
</html>顯示效果如下：
感謝你能夠認真閱讀完這篇文章，希望小編分享設置css文本自動換行的方法內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
