So verwenden Sie CSS, um überschüssigen Text in Ellipsen umzuwandeln

CSS ist eine sehr wichtige Technologie in der Frontend-Entwicklung und die Stilkontrolle ist eine wichtige Fähigkeit in der CSS-Technologie. In diesem Artikel zeige ich Ihnen, wie Sie mithilfe von CSS Text, der nicht ausgeblendet ist, in Auslassungspunkte umwandeln.

1. Der Text kann nicht ausgeblendet werden.

Wenn der Text auf der Seite einen bestimmten Bereich überschreitet, ist es manchmal erforderlich, ihn auszublenden und nur einen Teil des Textes anzuzeigen. Zu diesem Zeitpunkt können wir die Überlaufeigenschaft in CSS verwenden, um dies zu erreichen.

Das Überlaufattribut kann verwendet werden, um zu steuern, wie der Inhalt innerhalb eines Elements behandelt wird, wenn er den Containerbereich überschreitet. Zu den allgemeinen Attributwerten gehören versteckt, sichtbar, automatisch und scrollen.

Wenn wir overflow:hidden festlegen, wird der Inhalt außerhalb des Containerbereichs ausgeblendet.

Zum Beispiel können wir „overflow:hidden“ für einen div-Container in CSS festlegen und dann viel Text einfügen. Der Text überschreitet den Umfang des Containers, wird jedoch ausgeblendet und nur ein Teil des Textes innerhalb des Containers kann gesehen werden. Dadurch wird erreicht, dass der Text nicht mehr sichtbar ist.

2. Implementierung von Ellipsen

Das Ausblenden von übermäßigem Text bedeutet nur das Ausblenden von Text, aber in manchen Fällen reicht es nicht aus, den Benutzern die überschüssigen Textinformationen anzuzeigen. Zu diesem Zeitpunkt müssen Sie am Ende des ausgeblendeten Texts Auslassungspunkte hinzufügen. Auf diese Weise können Benutzer die ausgelassenen Textinformationen erkennen, ohne das Gesamtlayout der Seite zu beeinträchtigen.

In CSS können wir die Eigenschaft text-overflow verwenden, um Ellipsen hinzuzufügen. Mit dem text-overflow-Attribut kann gesteuert werden, wie Text außerhalb des zulässigen Bereichs angezeigt wird. Der übliche Wert ist Ellipse, was bedeutet, dass Text außerhalb des zulässigen Bereichs durch Auslassungspunkte ersetzt wird.

Es ist jedoch zu beachten, dass das Textüberlaufattribut nur dann wirksam wird, wenn die folgenden drei Bedingungen gleichzeitig erfüllt sind:

1 Das Leerraumattribut des Elements muss auf „nowrap“ oder „pre“ gesetzt sein

2. Das Überlaufattribut des Elements muss auf „verborgen“ oder „scrollen“ gesetzt sein.

3 Das Breiten- oder Höhenattribut des Elements muss auf einen festen Wert eingestellt sein.

Unter der Voraussetzung, dass die oben genannten drei Bedingungen erfüllt sind, können wir das Textüberlaufattribut verwenden, um Text außerhalb des Bereichs in Ellipsen umzuwandeln.

Zum Beispiel können wir den Text in einem div-Container ausblenden und das text-overflow-Attribut verwenden, um Ellipsen hinzuzufügen:

div{

overflow: versteckt;
text-overflow: ellipsis;
white-space: nowrap;
width : 200px;
}

In diesem Beispiel verstecken wir den Text in einem div-Container, begrenzen die Breite des Containers auf 200 Pixel und verwenden das text-overflow-Attribut, um den Text außerhalb des Bereichs durch Ellipsen zu ersetzen.

3. Fazit

Die Verwendung von Text über das Ausblenden hinaus und Ellipsen sind gängige Techniken in CSS, die eine sehr wichtige Rolle bei der Gestaltung und dem Layout von Webseiten spielen. Bei der Verwendung müssen Sie jedoch auf die Einstellungen verschiedener Attribute und Bedingungen achten, um die erwarteten Ergebnisse zu erzielen. Ich hoffe, dieser Artikel hilft Ihnen!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS, um überschüssigen Text in Ellipsen umzuwandeln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!