So erstellen Sie einen Textumbrucheffekt in CSS-CSS-Tutorial-php.cn

So erstellen Sie einen Textumbrucheffekt in CSS

WBOY

Freigeben： 2021-11-29 11:06:43

Original

10948 Leute haben es durchsucht

Methode: 1. Verwenden Sie das Float-Attribut, um den Float des Elements so festzulegen, dass der Text das Element umschließt. Die Syntax lautet „Surrounded Element {float: float style;}“ 2. Verwenden Sie den „word-break“; Attribut zum Festlegen des Zeilenumbruchs beim Umbrechen des Textes. Die Syntax lautet „Textelement {Wortumbruch:Zeilenumbruchstil;}“.

So erstellen Sie einen Textumbrucheffekt in CSS

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

So erstellen Sie einen Textumbrucheffekt in CSS

In CSS können Sie das Float-Attribut verwenden, um die Richtung zu definieren, in der das Element schwebt. In der Vergangenheit wurde diese Eigenschaft immer auf Bilder angewendet, wodurch der Text um das Bild herum umbrochen wurde. In CSS kann jedoch jedes Element schwebend dargestellt werden. Ein schwebendes Element erstellt eine Box auf Blockebene, unabhängig davon, um welchen Elementtyp es sich handelt.

Das Beispiel sieht wie folgt aus: Wir verwenden Bilder, um dem Bild einen schwebenden Stil hinzuzufügen, und der Text umgibt das Bild.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>123</title>
    <style>
    .img-left {
        border: 3px solid #005588;
        width:300px;
        word-break: break-all;
    }
    .img-left img {
        float:left;  
        width:150px;
    }
</style>
  </head>
  <body>
  <div class="img-left">
    <img src="1115.08.png" alt="pic"/>
    loat 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
    <div style="clear:both;"></div>
</div>
  </body>
</html>

Nach dem Login kopieren

Ausgabeergebnis:

So erstellen Sie einen Textumbrucheffekt in CSS

Dieses Mal ist es auf Chinesisch, Sie müssen nur word-break: break-all zum Element hinzufügen; der Stil erlaubt Zeilenumbrüche innerhalb des Wortes.

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen Textumbrucheffekt in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!