溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了設(shè)置css文本自動換行的方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
CSS3包含幾個額外的功能，如下：
1.文本溢出
2.自動換行
3.字斷
CSS3中有以下最常用的屬性：
1.文本溢出
文本溢出屬性確定如何向用戶發(fā)出未顯示的溢出內(nèi)容的信號。文本溢出的示例示例如下所示 ：
<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>
億速云提供大量免費、原創(chuàng)、高清的php視頻教程，并定期舉行公益php培訓！可邊學習邊在線修改示例代碼，查看執(zhí)行效果！php從入門到精通，一站式php自學平臺！
</p>
<b>測試2</b>
<p class = "text1">
億速云提供大量免費、原創(chuàng)、高清的php視頻教程，并定期舉行公益php培訓！可邊學習邊在線修改示例代碼，查看執(zhí)行效果！php從入門到精通，一站式php自學平臺！
</p>
<b>測試3</b>
<p class = "text2">
億速云提供大量免費、原創(chuàng)、高清的php視頻教程，并定期舉行公益php培訓！可邊學習邊在線修改示例代碼，查看執(zhí)行效果！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">
億速云提供大量免費、原創(chuàng)、高清的php視頻教程，并定期舉行公益php培訓！可邊學習邊在線修改示例代碼，查看執(zhí)行效果！php從入門到精通，一站式php自學平臺
</p>
<b>測試2</b>
<p class = "text2">
億速云提供大量免費、原創(chuàng)、高清的php視頻教程，并定期舉行公益php培訓！可邊學習邊在線修改示例代碼，查看執(zhí)行效果！php從入門到精通，一站式php自學平臺
</p>
</body>
</html>顯示效果如下：
感謝你能夠認真閱讀完這篇文章，希望小編分享設(shè)置css文本自動換行的方法內(nèi)容對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼