Heim >Web-Frontend >CSS-Tutorial >So stellen Sie den automatischen Zeilenumbruch in CSS ein

So stellen Sie den automatischen Zeilenumbruch in CSS ein

coldplay.xixi
coldplay.xixiOriginal
2021-03-02 10:52:5012149Durchsuche

So richten Sie den automatischen Zeilenumbruch in CSS ein: Verwenden Sie das Attribut [word-break], um dem Browser zu ermöglichen, eine Zeile an jeder Position umzubrechen. Der Code ist [.p3{width:200px;border:1px solid #ccc;word -break:break- all].

So stellen Sie den automatischen Zeilenumbruch in CSS ein

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3- und HTML5-Version, DELL G3-Computer.

So richten Sie den automatischen Zeilenumbruch in CSS ein:

Automatischer Zeilenumbruch: Mithilfe des Attributs word-break können Sie dem Browser erlauben, Zeilen an jeder Position umzubrechen. word-break属性,可以让浏览器实现在任意位置换行

它有三个属性值分别为:

  • normal: 浏览器中的默认换行行为

  • break-all:可允许在单词内换行

  • keep-all

    Es gibt drei Attributwerte:
    normal: Das standardmäßige Zeilenumbruchverhalten in Browsern

  • break- all: Zeilenumbrüche innerhalb von Wörtern sind erlaubt

  • So stellen Sie den automatischen Zeilenumbruch in CSS einkeep-all: Zeilenumbrüche können nur an Leerzeichen halber Breite oder Bindestrichen vorgenommen werden

    Beispiel:

    <style>
    .p1{
    width:200px;
    border:1px solid #ccc;
    word-break:normal;
    }
     
    .p2{
    width:200px;
    border:1px solid #ccc;
    word-break:keep-all;
    }
     
    .p3{width:200px;
    border:1px solid #ccc;
    word-break:break-all;
    }
    </style>
    </head>
    <body>
    <p class="p1">Php Chinese website provides a large number of free, original, 
    high-definition php video tutorials.</p>
    <p class="p2">Php Chinese website provides a large   number of free, 
    original, high-definition php video tutorials.</p>
    <p class="p3">Php Chinese website provides a large number of free, original,
     high-definition php video tutorials.</p>
    </body>

    Rendering:
    🎜 🎜🎜🎜🎜Verwandte Tutorial-Empfehlungen: 🎜CSS-Video-Tutorial🎜🎜🎜

Das obige ist der detaillierte Inhalt vonSo stellen Sie den automatischen Zeilenumbruch in CSS ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn