1. Den Anzeigeeffekt von Text mit Ellipsen beherrschen
1 DIV+CSS ist erforderlich, gilt nicht für Frames
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
1. Bereiten Sie die Materialien vor: Erstellen Sie einen Bilderordner im Stammverzeichnis und speichern Sie alle relevanten Materialbilder hier. Die Materialien umfassen
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
.top{
width: 100%;
text-align: center;
font-size: 22px;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
margin-bottom: 20px;
}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
li.zan{
margin-left:100px;
margin-right:35px;
border-right: 1px solid lightgray;
}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;
}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;
}Der zu index.css hinzugefügte Code lautet also wie folgt:
.fireicon{
padding-right:10px;
}.text{
color:gray;
font-size: 16px;
}.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
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!
