css文字自動換行如何設定？-css教學-PHP中文網

首頁

web前端

css教學

css文字自動換行如何設定？

云罗郡主

Nov 09, 2018 pm 03:31 PM

設定

這篇文章帶給大家的內容是關於css文字自動換行如何設置，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

CSS3包含幾個額外的功能，如下：

1.文字溢位

#2.自動換行

3.字斷

CSS3中有以下最常用的屬性：【推薦學習：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从入门到精通，一站式php自学平台！
      </p>
      
      <b>测试2</b>
   
      <p class = "text1">
         php中文网提供大量免费、原创、高清的php视频教程，并定期举行公益php培训！可边学习边在线修改示例代码，查看执行效果！php从入门到精通，一站式php自学平台！
      </p>
      
      <b>测试3</b>
   
      <p class = "text2">
         php中文网提供大量免费、原创、高清的php视频教程，并定期举行公益php培训！可边学习边在线修改示例代码，查看执行效果！php从入门到精客家话通，一站式php自学平台！
      </p>
      
   </body>
</html>

登入後複製

2.自動換行：

自動換行用於打破行並換行到下一行。以下程式碼將包含範例語法：

p {
   word-wrap: break-word;
}

登入後複製

下面的程式碼顯示了斷字的範例程式碼：

#顯示效果如下：

css文字自動換行如何設定？ ##

<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从入门到精通，一站式php自学平台
      </p>
      
      <b>测试2</b>
   
      <p class = "text2">
         php中文网提供大量免费、原创、高清的php视频教程，并定期举行公益php培训！可边学习边在线修改示例代码，查看执行效果！php从入门到精通，一站式php自学平台
      </p>
      
   </body>
</html>

登入後複製

顯示效果如下：

css文字自動換行如何設定？