Wie stelle ich ein, dass CSS-Text automatisch umgebrochen wird?-CSS-Tutorial-php.cn

Wie stelle ich ein, dass CSS-Text automatisch umgebrochen wird?

云罗郡主

Freigeben： 2018-11-09 15:31:35

Original

6006 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der Einrichtung des automatischen Zeilenumbruchs in CSS. Ich hoffe, dass er für Freunde hilfreich ist.

CSS3 enthält mehrere zusätzliche Funktionen:

1. Automatischer Zeilenumbruch

Es gibt die folgenden am häufigsten verwendeten Attribute in CSS3: [Empfohlenes Lernen:

CSS3-Tutorial

]1. TextüberlaufDie Textüberlaufeigenschaft bestimmt, wie nicht angezeigte Überlaufinhalte dem Benutzer signalisiert werden. Ein Beispiel für einen Textüberlauf ist unten dargestellt:

<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>

Nach dem Login kopieren

2. Zeilenumbruch:

Zeilenumbruch wird verwendet, um Zeilen zu unterbrechen und in die nächste Zeile umzubrechen. Der folgende Code enthält Beispielsyntax:

p {
   word-wrap: break-word;
}

Nach dem Login kopieren

Der folgende Code zeigt Beispielcode für die Silbentrennung:

Es sieht so aus:

<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>

Nach dem Login kopieren

Der Anzeigeeffekt ist wie folgt:

Wie stelle ich ein, dass CSS-Text automatisch umgebrochen wird?

Der Inhalt dieses Artikels befasst sich mit der Einrichtung des automatischen Zeilenumbruchs für CSS-Text. Es hat einen bestimmten Referenzwert Verweisen Sie darauf, ich hoffe, es hilft Ihnen.

Das obige ist der detaillierte Inhalt vonWie stelle ich ein, dass CSS-Text automatisch umgebrochen wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!