suchen

Heim  >  Artikel  >  Web-Frontend  >  Textüberlauf in CSS3 implementiert den Anzeigeeffekt von Artikeltiteln mit Ellipsen (Codebeispiel)

Textüberlauf in CSS3 implementiert den Anzeigeeffekt von Artikeltiteln mit Ellipsen (Codebeispiel)

易达
易达Original
2020-06-05 16:01:342269Durchsuche

Ziel dieses Artikels:

1. Den Anzeigeeffekt von Text mit Ellipsen beherrschen

Frage:

1 DIV+CSS ist erforderlich, gilt nicht für Frames

Textüberlauf in CSS3 implementiert den Anzeigeeffekt von Artikeltiteln mit Ellipsen (Codebeispiel)

Zusätzliche Anweisungen

1. Die Gesamtbreite beträgt 500 Pixel und wird in der Mitte der Seite angezeigt

2. Titelschriftart Die Größe beträgt 22 Pixel, andere Schriftarten sind 16 Pixel

3 Der Name des Autors von Super Pistachio steht ganz links und die vor 2 Tagen angezeigte Zeit ist eingeschaltet ganz rechts,

4. Alle kleinen Symbole haben eine Anzeigegröße von 20 Pixel

5. Der vollständige Text des Titels lautet: Lu Yaos „Ordinary World“ hat unzählige junge Menschen inspiriert und unzählige Menschen inspiriert Herzen

Jetzt führen wir den spezifischen Vorgang aus

1. Bereiten Sie die Materialien vor: Erstellen Sie einen Bilderordner im Stammverzeichnis und speichern Sie alle relevanten Materialbilder hier. Die Materialien umfassen

Textüberlauf in CSS3 implementiert den Anzeigeeffekt von Artikeltiteln mit Ellipsen (Codebeispiel)

Textüberlauf in CSS3 implementiert den Anzeigeeffekt von Artikeltiteln mit Ellipsen (Codebeispiel)

Textüberlauf in CSS3 implementiert den Anzeigeeffekt von Artikeltiteln mit Ellipsen (Codebeispiel)

2. Erstellen Sie index.html und schreiben Sie die Architektur um die Architektur zu analysieren?

Ideenanalyse:

Der erste Teil ist ein großer Titel Dieser Titel weist Auslassungspunkte auf, die darauf hinweisen, dass der darin enthaltene Text die maximale Breite des Containers überschreitet.

2. Der folgende Teil ist eine Liste. Die Liste zeigt von links nach rechts den Namen des Autors, ein beliebtes Logo, die Anzahl der Likes, die Anzahl der Kommentare und das Veröffentlichungsdatum des Textes, angezeigt in Tagen

Laut Nachanalyse erhalten wir den folgenden Code 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3文本带省略号实现案例</title>
</head>
<body>
    <div class="container">
       <div class="top">
            路遥《平凡的世界》，激励了无数的青年，鼓舞了无数人的心
       </div>
       <div class="bottom">
           <ul>
               <li><span class="text">超级开心果</span></li>
               <li class="zan">
                   <img  src="images/Textüberlauf in CSS3 implementiert den Anzeigeeffekt von Artikeltiteln mit Ellipsen (Codebeispiel)" class="icon fireicon"/ alt="Textüberlauf in CSS3 implementiert den Anzeigeeffekt von Artikeltiteln mit Ellipsen (Codebeispiel)" >
                   <img  src="images/Textüberlauf in CSS3 implementiert den Anzeigeeffekt von Artikeltiteln mit Ellipsen (Codebeispiel)" class="icon zanicon"/ alt="Textüberlauf in CSS3 implementiert den Anzeigeeffekt von Artikeltiteln mit Ellipsen (Codebeispiel)" >
                   <span class="text">45</span>
               </li>
               <li class="liuyan">
                <img  src="images/Textüberlauf in CSS3 implementiert den Anzeigeeffekt von Artikeltiteln mit Ellipsen (Codebeispiel)" class="icon"/ alt="Textüberlauf in CSS3 implementiert den Anzeigeeffekt von Artikeltiteln mit Ellipsen (Codebeispiel)" >
                <span class="text">0</span>
               </li>
               <li class="date"> <span class="text">2天前</span></li>
               <li class="clear"></li>
           </ul>
       </div>
    </div>
</body>
</html>

3. Schreibstil

Ideenanalyse:

1. .container *

Ideenanalyse

1. Um die gemeinsamen Stile aller Elemente im Container festzulegen, können wir diese gemeinsamen Codes in den .container *-Stil schreiben

Fügen Sie also den folgenden Code zu index.css hinzu: 

.container *{
    padding:0;
    margin: 0;
}

2. .container

Denkanalyse

1. Gemäß den oben genannten Anforderungen muss width=500px zentriert sein, damit der Code in einen Rand umgewandelt wird :0 auto;

Fügen Sie also den folgenden Code zu index.css hinzu: 

.container{
    width: 500px;
    margin:0 auto;
}

3, .top

Ideenanalyse

1. Gemäß den oben genannten Anforderungen beträgt die Breite bekanntermaßen 100 % und der Titel sollte in der Mitte angezeigt werden, d. h. die Größe von text-align: center beträgt 22 Pixel, d. Der entscheidende Punkt ist, dass, wenn der Titel zu lang ist, wir ihn mit Ellipsen anzeigen müssen, also müssen wir so schreiben:

text-overflow:ellipsis (mit Ellipsen, wenn er länger ist)

overflow :hidden; (Ausblenden bei Überschreitung)

white-space:nowrap; (Bei Überschreitung nicht umbrechen)

2 und untere Divs müssen eine bestimmte Existenz haben. Der Abstand beträgt 22 Pixel, d. ul,li

Nach dem Effekt haben alle li keine schwarzen Punkte, also list-style: none; und sie sind horizontal angeordnet, also float: left

So wurde der Code hinzugefügt zu index.css lautet wie folgt: 

.top{
    width: 100%;
    text-align: center;
    font-size: 22px;
    text-overflow:ellipsis; 
    overflow:hidden; 
    white-space:nowrap; 
    margin-bottom: 20px;
}

5. li.clear

Da li alle schwebend sind, muss die letzte Spalte das Schweben löschen, also clear:both, float:none und in der Reihenfolge Um das Layout nicht zu beeinträchtigen, müssen Breite und Höhe von li.clear auf 0 eingestellt werden

, also fügen Sie den Code wie folgt zu index.css hinzu: 

ul li{
    list-style: none;
    float: left;

}

6, li.zan

weil die Spalte, in der die Like-Informationen angezeigt werden, und die erste Spalte einen bestimmten linken Rand haben und die rechte Spalte einen rechten Rand hat, also setzen wir ihn auf margin-left:100px margin; -right:30px;


Und weil es eine graue vertikale Linie gibt, können wir den rechten Rand von li mit einer Größe von 1 Pixel und einer hellgrauen Farbe anzeigen, also border-right: 1px einfarbig hellgrau;


Fügen Sie also den Code wie folgt zu index.css hinzu: 

li.clear{
    clear: both;
    float: none;
    width:0;
    height:0;
}

7.li.date

Weil das Li, das das Datum anzeigt, dies tun muss ganz rechts angezeigt werden, float:right

Der zu index.css hinzugefügte Code lautet also wie folgt: 

li.zan{
    margin-left:100px;
    margin-right:35px;
    border-right: 1px solid lightgray;
}

8 , .icon

1. Gemäß den Anforderungen betragen Breite und Höhe beide 20 Pixel

, also fügen Sie den Code wie folgt zu index.css hinzu: 

li.date{
    float: right;
}

9.fireicon

1 . Denn aus dem Ergebnis ergibt sich ein rechter Abstand zwischen ihm und dem Element auf der rechten Seite, sodass wir padding-right:10px;

.icon{
    width:20px;
    height: 20px;
}

10 schreiben können 🎜>1. Gemäß den Anforderungen ist die Farbe grau: grau und die Schriftgröße beträgt 16 Pixel, also Schriftgröße: 16 Pixel.

Der zu index.css hinzugefügte Code lautet also wie folgt: 

.fireicon{
    padding-right:10px;
}

Bisher lautet der gesamte Inhalt von index.css wie folgt: 

.text{
    color:gray;
    font-size: 16px;
}

Führen Sie dann index.css in index.html ein 

.container *{
    padding:0;
    margin: 0;
}
.container{
    width: 500px;
    margin:0 auto;
}
.top{
    width: 100%;
    text-align: center;
    font-size: 22px;
    text-overflow:ellipsis; 
    overflow:hidden; 
    white-space:nowrap; 
    margin-bottom: 20px;
}
ul li{
    list-style: none;
    float: left;

}
li.clear{
    clear: both;
    float: none;
    width:0;
    height:0;
}
li.zan{
    margin-left:100px;
    margin-right:35px;
    border-right: 1px solid lightgray;
}
li.date{
    float: right;
}

.icon{
    width:20px;
    height: 20px;
}
.fireicon{
    padding-right:10px;
}
.text{
    color:gray;
    font-size: 16px;
}

Der laufende Effekt ist wie folgt:

Bisher haben wir alle Anforderungen erfüllt

Zusammenfassung:

1. Wir haben gelernt, wie man Text mit Ellipsen anzeigt:

Text -overflow:ellipsis;

overflow:hidden;

white-space:nowrap

Ich hoffe, dieser Artikel kann allen helfen, danke! ! !

Das obige ist der detaillierte Inhalt vonTextüberlauf in CSS3 implementiert den Anzeigeeffekt von Artikeltiteln mit Ellipsen (Codebeispiel). 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
Vorheriger Artikel：Der lineare CSS3-Gradient realisiert 4 verbundene Ringe (Codebeispiel)Nächster Artikel：Der lineare CSS3-Gradient realisiert 4 verbundene Ringe (Codebeispiel)

In Verbindung stehende Artikel

Mehr sehen