So implementieren Sie CSS, um Inhalte automatisch in Webseiten einzubinden

Zahlen können dazu führen, dass der Container gedehnt wird und nicht automatisch entsprechend der Größe des Containers umgebrochen wird. Hier erfahren Sie, wie Sie sie mit CSS umbrechen!

Für div

1 (IE-Browser) Leerzeichen:normal; Ersteres folgt hier dem Standard.

#wrap{white-space:normal; width:200px;🎜>oder
#wrap{word-break:break-all;width:200px;}

&lt ;div id="wrap">ddd1111111111111111111111111</div>

Effekt: Zeilenumbruch kann erreicht werden

2. (Firefox-Browser) white-space:normal; word-break:break - all;overflow:hidden; Ebenso gibt es in FF keine gute Implementierungsmethode. Natürlich ist es besser, keine Bildlaufleisten hinzuzufügen.

#wrap{white-space:normal; width:200px; }

<div id="wrap">ddd1111111111111111111111111111111111111</div>

Effekt: Container ist normal, Inhalt ist ausgeblendet

Für Tabelle

1 . (IE-Browser) Verwenden Sie den Stil table-layout:fixed;

<style>

.tb{table-layout:fixed>

<table class="tbl" width="80">
<tr>
<td>abcdefghigklmnopqrstuvwxyz 1234567890

</td>

</tr>
</table>

Effekt: kann umbrechen

2. (IE-Browser) Stiltabellenlayout verwenden: fest und jetztrap

<style>

.tb {table-layout:fixed}

</style>

<table class="tb" width="80">
<tr>
&lt ;td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890

</td>

</tr>

Wirkung: kann

3 Durchsuchen Sie tb{table-layout:fixed}
</style>

<table class="tb" width=80>

<tr>

<td width= 25 % nowrap>abcdefghigklmnopqrstuvwxyz 1234567890

</td>

&lt ;td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>

</table>

Effekt: Beide tds werden normal umgebrochen

4. (Firefox-Browser) Verwenden Sie die Stile „table-layout:fixed“ und „nowrap“, wenn Sie „Prozentsatz“ verwenden, um die td-Größe festzulegen, und verwenden Sie div

<style>
.tb {table-layout:fixed}
.td {overflow:hidden;}

</style>

<table class=tb width=80&gt ;

<tr>

<td width= 25% class=td nowrap>

<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td class=td nowrap>
<div>abcdefghigklm nopqrstuvwxyz 1234567890</ div>

</td>

</tr>
</table>

The Die Zellenbreite muss hier als Prozentsatz definiert werden

Effekt: normale Anzeige, kann aber nicht umbrochen werden (Hinweis: Es gibt keine gute Möglichkeit, den Inhalt des Containers unter FF zu umbrechen. Sie können den Überlauf nur verwenden, um das Extra auszublenden Inhalt, um eine Beeinträchtigung des Gesamteffekts zu vermeiden)

Bitte beachten Sie weitere verwandte Artikel auf der chinesischen PHP-Website (www.php.cn)!