Der Textüberlauf zeigt automatisch die Ellipsen-CSS-Methode an

Dieses Mal werde ich Ihnen die Methode zur automatischen Anzeige von Ellipsen-CSS bei Textüberlauf vorstellen. Was sind die Vorsichtsmaßnahmen für die automatische Anzeige von Ellipsen-CSS bei Textüberlauf?

Um das ursprüngliche Layout nicht zu beschädigen, müssen wir den zusätzlichen Text durch Auslassungspunkte ersetzen, um die folgenden Effekte zu erzielen:

• Mrs . Text Es gibt so viele...

• Das ist nicht viel.

html: Dies ist eine Liste. Beide UL/OL sind in Ordnung.

<ul>
    <li>这是个短句子</li>
    <li>403是因为服务器拒绝了你的地址请求，或者你根本没权限访问网站，提供身份验证也没用，也就是说，用户被禁止访问了。然而除非与Web服务器管理员联系，否则一旦遇到403状态码都无法自行解决。</li></ul>

Zuallererst lautet der CSS-Code der Auslassungspunkte: text-overflow: ellipsis; Beachten Sie, dass diese Codezeile häufig nicht funktioniert, da sie zwei Bedingungen erfüllen muss: 1. Die Breite muss festgelegt werden; 2. Stellen Sie gleichzeitig white-space ein: nowrap (kein Zeilenumbruch); Daher der vollständige CSS-Code:

li {
    width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display:inline-block;//如果是一个inline标签，还需要加入这一行代码，因为对于inline标签，设置width没有用。这里是li标签，本来就是block，因此不需要。}

Hier tritt jedoch das Problem auf, nachdem overflow: versteckt auf li eingestellt wurde. Der list-style-type der gesamten Liste funktioniert nicht Auch hier ist es egal, welches kleine Symbol eingestellt ist, es ist nutzlos. Der Effekt ist wie folgt:

Lösung: ul add Setting list-style-position: inside;

Aber! ! ! Zu diesem Zeitpunkt wird das Symbol angezeigt und der Überlauftext ausgeblendet, aber die Auslassungspunkte sind nirgends zu finden. . . .

Am Ende weiß ich nicht, warum es so eine Wirkung hat. Allerdings habe ich einen unbezwingbaren Geist und habe von vorne angefangen. . . .

Ich habe es mir anders überlegt und den Stil in der Liste geändert, der sich auf den gesamten Körper auswirkt. Ich werde den Text mit Auslassungspunkten mit umschließen und das wird das Problem lösen.

<ul>
    <li><span>这是个短文字</span></li>
    <li><span>403是因为服务器拒绝了你的地址请求，或者你根本没权限访问网站，提供身份验证也没用，也就是说，用户被禁止访问了。然而除非与Web服务器管理员联系，否则一旦遇到403状态码都无法自行解决。</span></li></ul>

CSS-Code:

span{
    width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display:inline-block;//span是一个inline标签，设置width没有用。因此需要这句代码。}

ul{
    list-style-type:circle;
    /*list-style-position: inside;注意，不需要添加这行代码*/
}

Hahaha. . . . Endlich ist es passiert! ! ! ! Es gibt sowohl Listensymbole als auch Ellipsen.

Fazit: Wenn Sie Überlauftext festlegen, legen Sie ihn nicht direkt auf dem li-Tag fest, da sonst Probleme mit dem Listenstil auftreten, oder wickeln Sie ihn in span ein und legen Sie die span-Auslassungspunkte fest.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Grundkenntnisse von HTML im Frontend

Position des CSS-Float-Box-Modells

Das obige ist der detaillierte Inhalt vonDer Textüberlauf zeigt automatisch die Ellipsen-CSS-Methode an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!