一些屬性要處理CSS中的文本

• 如何用文字包裹文字
• Word 2013全文教程（第12部分）：如何打破頁面，段落中斷

本文TipsMake.com將與您一起學習如何處理太長時間以無法引起包含它的元素的溢出的文本：

1. 文本跨流
2. 單詞包
3. 單詞破裂
4. 寫作模式

文本溢出

text-overflow屬性是用於處理通過截斷溢出或將其顯示為“”的文本，該文本從包含它的元素中溢出。標記用戶。

兩個最常見的值是：

1. 夾子：切斷溢出的文本（默認）。
2. 省略：如果文本溢出，請添加三個點（。）。

文本跨流帶來的兩個屬性是：

1. 白色空間：nowrap;
2. 溢出：隱藏；

示例1：文本處理溢出。

 p.test1 { 
  white-space: nowrap; 
  width: 400px; 
  border: 1px solid #000000; 
  overflow: hidden; 
  text-overflow: clip; 
 } 
  p.test2 { 
  white-space: nowrap; 
  width: 400px; 
  border: 1px solid #000000; 
  overflow: hidden; 
  text-overflow: ellipsis; 
 }

結果顯示：

完整代碼：

text-overflow屬性

以下段落包含長文本，這些文本溢出了包含它的框。

文字跨流：剪輯：

tipsmake.com是一個關於科學技術的社交網絡

文字跨流：省略號：

tipsmake.com是一個關於科學技術的社交網絡

示例2：懸停在元素上時顯示溢出的內容：

 div.test:hover { 
  overflow: visible; 
 } 

懸停在下面的兩個div上，查看整個文本。

tipsmake.com是一個社交網絡
科學技術協會

tipsmake.com是一個社交網絡
關於科學技術

單詞包裹

單詞包裝如果屬性太長，則允許文本在下游，這可能會導致單詞中斷。

最典型的兩個值是：

1. 普通的：默認顯示，可能會溢出長字（默認）
2. Break-word：如果單詞太長，文本會跳下線路，可能會導致單詞中斷。

例子：處理文本太長

 p1 { 
 word-wrap: normal; 
 } 
  p2 { 
 word-wrap: break-word; 
 }

結果顯示：

完整代碼：

word-trap屬性

WebSIteTrymantation網絡網站網站網絡是關於科學的社交網絡
學習技術。

WebSIteTrymantation網絡網站網站網絡是關於科學的社交網絡
學習技術。

單詞斷開

word包裝確定該行是否降低，並且破壞工作屬性確定流的類型。

共同值是：

1. 普通的：默認顯示，可能會溢出長字（默認）
2. 保留：不與中文 /日語 /韓語（CJK）文本一起使用，功能與普通的。不同之處在於，如果該單詞具有連字符，它將在適當的位置下游。
3. 分手：當期間結束時，一個單詞將自動斷開任何性格下線，這可能會導致單詞中斷。
4. Break-word：何時結束，它將自動在任何單詞下來。

如果是正常的文本，我們將使用斷言更多，然後分手是通常僅用於數字（如果有）。

例如：工作破壞屬性確定流量的類型

 pa { 
  word-break: normal; 
 } 
  pb { 
  word-break: keep-all; 
 }
  pc { 
  word-break: break-all; 
 }
  pd { 
  word-break: break-word; 
 }

文字破壞屬性

單詞破裂：正常（默認）：

網站網絡網站網站網站網絡是科學的社交網絡
技術。

單詞折斷：保留：

網站網站網站網站網絡是一個網絡 - 社會 - 科學 - 科學 -
技術。

單詞破裂：分類：

網站Quantruongmay是科學技術的社交網絡。

單詞破裂：分類：

網站Quantruongmay是科學技術的社交網絡。

寫作模式

寫作模式屬性用於水平或垂直放置的文本樣式。

寫作模式的值：

1. 水平-TB：文本將從從上到下水平放置，從上到下讀取（默認）。
2. 垂直-RL：文本從右至左垂直放置，從上到下讀取。
3. 垂直LR：該文本從左至右垂直放置，從上到下讀取。

例子：使用寫作模式

 p.test1 { 
  writing-mode: horizontal-tb; 
 } 
  p.test2 { 
  writing-mode: vertical-rl; 
 }
  p.test3 { 
  writing-mode: vertical-lr; 
 }

結果顯示：

完整代碼：

寫作模式屬性

寫作模式：水平-TB；

您可以成為Tipsmake.com的一部分
提交文章，向內容管理團隊體驗您的技術
通過電子郵件[email protected]或註冊帳戶的社交網絡
並直接在tipsmake.com上發布。

寫作模式：垂直-RL；

您可以成為Tipsmake.com的一部分
提交文章，向內容管理團隊體驗您的技術
通過電子郵件[email protected]或註冊帳戶的社交網絡
並直接在tipsmake.com上發布。

寫作模式：垂直LR；

您可以成為Tipsmake.com的一部分
提交文章，向內容管理團隊體驗您的技術
通過電子郵件[email protected]或註冊帳戶的社交網絡
並直接在tipsmake.com上發布。

上一課：CSS中的影子效果

下一課：使用CSS中的Web字體

你應該閱讀

• 如何刪除整個部分中斷
• 用文字包裝文字
• 如何在Excel中自動包裝線（在Excel中包裝文本）
• 如何在單詞中編輯文本
• 單詞中斷 - 有關如何在Word 2007、2010、2013、2016中打破頁面的說明
• Microsoft Word 2016的有用提示
• 更改Word 2007和2010中的部分中斷
• 如何修復單詞溢出中的表錯誤

可能有興趣