Legen Sie mithilfe von CSS die Textlängenbeschränkung auf N Zeilen fest-CSS-Tutorial-php.cn

Legen Sie mithilfe von CSS die Textlängenbeschränkung auf N Zeilen fest

王林

Freigeben： 2023-08-27 13:29:08

nach vorne

1328 Leute haben es durchsucht

使用 CSS 将文本长度限制设置为 N 行

Manchmal müssen Entwickler Text entsprechend der Größe von HTML-Elementen kürzen. Beispielsweise beträgt die Breite des div-Elements 100 Pixel und es kann nur einige Zeichen aufnehmen. Daher müssen wir CSS verwenden, um den Text abzuschneiden.

Wir können jedoch JavaScript verwenden, um den Text abzuschneiden, was jedoch zu Problemen führen kann. Beispielsweise können wir 18 Zeichen in 100 Pixeln anzeigen, aber manchmal werden aufgrund der Großschreibung von Zeichen möglicherweise weniger Zeichen angezeigt. Wenn wir in diesem Fall 18 Zeichen anzeigen, kann es zu einem Überlauf kommen.

Es ist also eine bessere Idee, CSS zum Abschneiden von Text zu verwenden.

Grammatik

Benutzer können das Textlimit mithilfe von CSS mithilfe der folgenden Syntax auf N Zeilen festlegen.

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

Nach dem Login kopieren

In der obigen Syntax setzen wir den Überlauf auf versteckt und „text-overflow: elipsis“, um den Text abzuschneiden. Der Wert der Eigenschaft „-webkit-line-clamp“ zeigt die Anzahl der anzuzeigenden Zeilen an.

Beispiel 1

Im folgenden Beispiel zeigen wir nur eine Textzeile an. Wir werden den anderen Text abschneiden. Wir legen 300 Pixel als Breite des div-Elements fest, ausgeblendet als Überlauf und Auslassungspunkte als Textüberlaufattribut. Darüber hinaus verwenden wir das Attribut „white-space“ und den Wert „no-wrap“, um Text nur in einer einzelnen Zeile anzuzeigen.

<html>
<head>
   <style>
      div {
         height: auto;
         width: 300px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         background-color: red;
         color: white;
         padding: 10px;
      }
   </style>
</head>
<body>
   <h2>Limiting the text length to 1 line using CSS</h2>
   <div>This is a div containing multiple lines of text. The text visibility is limited to 1 line only.</div>
</body>
</html>

Nach dem Login kopieren

Die chinesische Übersetzung von

Beispiel 2

lautet:

Beispiel 2

Im folgenden Beispiel zeigen wir N Zeilen abgeschnittenen Texts. Wir haben dem div-Element wie im ersten Beispiel Text hinzugefügt. Danach haben wir die CSS-Eigenschaft „webkit-line-clamp“ verwendet, um die Anzahl der Zeilen festzulegen, anstatt die CSS-Eigenschaft „white-space: no-wrap“ zu verwenden.

In der Ausgabe kann der Benutzer feststellen, dass nur drei Zeilen abgeschnittener Text angezeigt werden. Der Benutzer kann die Anzahl der Zeilen ändern und die Ausgabe beobachten.

<html>
<head>
   <style>
      div {
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
         line-height: 20px;
         max-height: 100px;
         padding: 4px 10px;
         max-width: 400px;
         background-color: aqua;
         -webkit-line-clamp: 3;
         -webkit-box-orient: vertical;
      }
   </style>
</head>
<body>
   <h3>Limiting the text length to N line using CSS</h3>
   <div>Git is a popular version control system used to track changes in code or other files. It allows multiple
      developers to work on the same project simultaneously, without overwriting each other's changes. Git uses a
      distributed architecture, which means that each developer has their own local copy of the repository, and
      changes can be easily merged together.</div>
</body>
</html>

Nach dem Login kopieren

Die chinesische Übersetzung von

Beispiel 3

lautet:

Beispiel 3

Im folgenden Beispiel demonstrieren wir die Echtzeitverwendung des Kürzens von Text auf N Zeilen. Hier haben wir eine Kartenkomponente mit HTML und CSS erstellt. Wir haben auf der linken Seite der Karte ein Bild und auf der rechten Seite Text hinzugefügt. Außerdem ist die Breite der Karte festgelegt.

Wir müssen Text auf der rechten Seite der Karte anzeigen, ohne dass der Text überläuft. Wir kürzen den Text auf 4 Zeilen, was in der Ausgabe zu sehen ist.

<html>
<head>
   <style>
      .card {
         background-color: grey;
         width: 400px;
         height: 80px;
         display: flex;
         border-radius: 12px;
         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
         text-align: left;
         justify-content: center;
      }
      .img {
         width: 130px;
         height: 70px;
         margin-right: 30px;
         padding: 5px;
      }
      img {
         width: 100%;
         height: 100%;
      }
      .content {
         width: 450px;
         height: 70px;
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
         -webkit-line-clamp: 4;
         -webkit-box-orient: vertical;
      }
   </style>
</head>
<body>
   <h2>Limiting the text length to N line using CSS</h3>
   <div class = "card">
      <div class = "img">
         <img src = "https://img.freepik.com/free-photo/grunge-paint-background_1409-1337.jpg" alt = "img">
      </div>
      <div class = "content">
         This is an information about the image. Whatever text will fit to the div, it will be shown. If the text is
         more than the div, then it will be hidden and the text will be shown as ellipsis.
      </div>
   </div>
</body>
</html>

Nach dem Login kopieren

Benutzer haben gelernt, Text in mehrere Zeilen zu kürzen. Wir können Text mithilfe der CSS-Eigenschaften „overflow:hidden“ und „text-overflow:elipsis“ abschneiden. Darüber hinaus müssen wir „white-space: no-wrap“ verwenden, um eine einzelne Textzeile abzuschneiden, und die CSS-Eigenschaft „webkit-line-clamp:lines“ verwenden, um Text in mehrere Zeilen abzuschneiden.

Das obige ist der detaillierte Inhalt vonLegen Sie mithilfe von CSS die Textlängenbeschränkung auf N Zeilen fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!