So setzen Sie Text in CSS über die Ellipsen hinaus-CSS-Tutorial-php.cn

So setzen Sie Text in CSS über die Ellipsen hinaus

醉折花枝作酒筹

Freigeben： 2023-01-05 16:10:00

Original

15907 Leute haben es durchsucht

Methode: Verwenden Sie zuerst die Anweisung „overflow:hidden“, um festzulegen, dass der Inhalt ausgeblendet wird, nachdem er den Grenzwert überschreitet. Verwenden Sie dann die Anweisung „text-overflow:ellipsis“, um festzulegen, dass der Inhalt als Auslassungspunkte angezeigt wird, wenn er überschritten wird das Limit; schließlich verwenden Sie die Anweisung „white-space:nowrap“, um den Text festzulegen. Umbrechen Sie ihn einfach nicht.

So setzen Sie Text in CSS über die Ellipsen hinaus

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

Erstellen Sie eine neue HTML-Seite, suchen Sie das

-Tag auf der HTML-Codeseite, erstellen Sie ein

-Tag, geben Sie dann den angezeigten Inhalt ein und fügen Sie eine Klasse hinzu. . Suchen Sie das

-Tag, erstellen Sie ein <style>-Tag und legen Sie fest, dass der Stilinhalt mit der Klasse cont im <style>-Tag ausgeblendet wird. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>document</title> <style> .cont{ overflow:hidden;/*内容超出后隐藏*/ } </style> </head> <body> <p class="cont"> 订单的的顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶</p> </body> </html></pre><div class="contentsignin">Nach dem Login kopieren</div></div><p>Speichern Sie den Code, öffnen Sie die HTML-Datei mit einem Browser, um den Effekt anzuzeigen, und stellen Sie fest, dass der Inhalt nicht ausgeblendet ist, da die Höhe des Inhalts nicht festgelegt ist. </p><p><img src="https://img.php.cn/upload/image/568/666/863/1618897643717434.png" title="1618897643717434.png" alt="So setzen Sie Text in CSS über die Ellipsen hinaus"/></p><p> Legen Sie den Inhalt so fest, dass er als eine Zeile angezeigt wird. Nach Überschreitung wird der Inhalt als Auslassungspunkte angezeigt. Das Hinzufügen von Inhalten zur cont-Klasse wird als Zeile angezeigt: white-space: nowrap; und der Inhalt nach der Überschreitung wird als Auslassungspunkte angezeigt: text-overflow: ellipsis (Hinweis: white-space: nowrap; und text-overflow : Auslassungspunkte; müssen gleichzeitig verwendet werden, um Auslassungspunkte anzuzeigen. </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><style> .cont{ overflow:hidden;/*内容超出后隐藏*/ text-overflow: ellipsis;/* 超出内容显示为省略号 */ white-space: nowrap;/* 文本不进行换行 */ } </style></pre><div class="contentsignin">Nach dem Login kopieren</div></div><p>Nachdem Sie den Code gespeichert haben, öffnen Sie ihn mit einem Browser, um zu sehen, welche Auswirkung es hat, wenn der Inhalt als Auslassungspunkte angezeigt wird, wenn er den Grenzwert überschreitet. <p><img src="https://img.php.cn/upload/image/183/356/670/1618897808567717.png" title="1618897808567717.png" alt="So setzen Sie Text in CSS über die Ellipsen hinaus"/><p>Empfohlenes Lernen: <a href="https://www.php.cn/course/list/12.html" target="_blank">CSS-Video-Tutorial</style>

Das obige ist der detaillierte Inhalt vonSo setzen Sie Text in CSS über die Ellipsen hinaus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!