it-swarm.com.de

Festlegen einer maximalen Zeichenlänge in css

Ich mache eine responsive Website für die Schule und meine Frage ist:

Wie lege ich eine maximale Zeichenlänge der Sätze (mit css) auf meiner Website fest (z. B. 75 Zeichen)? Wenn ich einen sehr großen Bildschirm habe, gehen die Sätze nicht weiter als 75 Zeichen.

Ich habe eine maximale Breite ausprobiert, aber das macht mein Layout durcheinander. Ich verwende Flexbox und Mediaqueries, um sie ansprechbar zu machen. 

120
Sharif1111

Sie können immer eine abgeschnittene Methode verwenden, indem Sie einen max-width und einen Überlauf Ellipsis wie folgt festlegen

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: Ellipsis;
  max-width: 200px;
}

Ein Beispiel: http://jsfiddle.net/3czeyznf/

Für eine mehrzeilige Kürzung sehen Sie sich eine flex-Lösung an. Ein Beispiel mit Kürzung in 3 Zeilen.

p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

Ein Beispiel: https://codepen.io/srekoble/pen/EgmyxV

185
Vangel Tzo

Es gibt einen CSS-Längenwert von ch.

Von MDN

Diese Einheit steht für die Breite oder genauer für das Vorschubmaß der Glyphe '0' (Null, das Unicode-Zeichen U + 0030) im Element Schriftart.

Dies kann ungefähr dem entsprechen, wonach Sie suchen.

p {
  overflow: hidden;
  max-width: 75ch;
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt rem odit quis quaerat. In dolorem praesentium velit ea esse consequuntur cum fugit sequi voluptas ut possimus voluptatibus deserunt nisi eveniet!Lorem ipsum dolor sit amet, consectetur
  adipisicing elit. Dolorem voluptates vel dolorum autem ex repudiandae iste quasi. Minima explicabo qui necessitatibus porro nihil aliquid deleniti ullam repudiandae dolores corrupti eaque.</p>

76
Paulie_D

Versuchen Sie dies, um Zeichen abzuschneiden, nachdem Sie die maximale Breite eingestellt haben. Ich habe in diesem Fall 75ch verwendet

p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: Ellipsis;
    max-width: 75ch;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis etc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis etc.</p>

Für das mehrzeilige Abschneiden folgen Sie bitte dem Link.

Ein Beispiel: https://codepen.io/srekoble/pen/EgmyxV

Wir werden dazu Webkit-CSS verwenden. Kurz gesagt, WebKit ist eine HTML/CSS-Webbrowser-Rendering-Engine für Safari/Chrome. Dies kann härter sein, da jeder Browser von einer Rendering-Engine unterstützt wird, um die HTML/CSS-Webseite zu zeichnen.

30
V K Singh

beispielcode:

.limited-text{
    white-space: nowrap;
    width: 400px;
    overflow: hidden;
    text-overflow: Ellipsis;
}
<p class="limited-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>

    

10
Hossein Jafari

HTML

<div id="dash">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a urna ac
quam.</p>
</div>

jQuery

var p = $('#dash p');
var ks = $('#dash').height();
while ($(p).outerHeight() > ks) {
  $(p).text(function(index, text) {
    return text.replace(/\W*\s(\S)*$/, '...');
  });
}

CSS

#dash {
  width: 400px;
  height: 60px;
  overflow: hidden;
}

#dash p {
  padding: 10px;
  margin: 0;
}

ERGEBNIS

Lorem ipsum dolor sitzt amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sitzen amet, mattis et ...

Jsfiddle

3
imtaher

In Chrome können Sie die Anzahl der angezeigten Zeilen mit "-webkit-line-clamp" einstellen: 

     display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;  /* Number of lines displayed before it truncate */
     overflow: hidden;

Also für mich ist es in einer Erweiterung zu verwenden, damit es perfekt ist, weitere Informationen hier: https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-geright -up-broken-865413f16e5

1
Khado Mikhal

Mit CSS ist das nicht möglich, dazu müssen Sie Javascript verwenden. Sie können zwar die Breite von p auf bis zu 30 Zeichen einstellen, und die nächsten Buchstaben werden automatisch herabgesetzt. Dies ist jedoch nicht so genau und variiert, wenn die Zeichen in Großbuchstaben geschrieben werden.

1
Jean-Luc

Probieren Sie meine Lösung auf zwei verschiedenen Wegen aus. 

<div class="wrapper">
      <p class="demo-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>

<div class="wrapper">
  <p class="demo-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>

.wrapper {
  padding: 20px;
  background: #eaeaea;
  max-width: 400px;
  margin: 50px auto;
}

.demo-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.demo-2 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: Ellipsis;
  max-width: 150px;
}
0
Super Model

Reine CSS-Lösung zum Abschneiden von mehrzeiligen Zeichen

Ich hatte ein ähnliches Problem und fand diese ausgezeichnete CSS-Lösung nur von Hackingui.com . Sie können den Artikel für Informationen lesen, aber unten ist der Hauptcode.

Ich habe es getestet und es funktioniert perfekt. Hoffentlich findet es jemand nützlich, bevor Sie sich für JS oder serverseitige Optionen entscheiden

  /* styles for '...' */ 
.block-with-text {
  /* hide text if it more than N lines  */
  overflow: hidden;
  /* for set '...' in absolute position */
  position: relative; 
  /* use this value to count block height */
  line-height: 1.2em;
  /* max-height = line-height (1.2) * lines max number (3) */
  max-height: 3.6em; 
  /* fix problem when last visible Word doesn't adjoin right side  */
  text-align: justify;  
  /* place for '...' */
  margin-right: -1em;
  padding-right: 1em;
}

/* create the ... */
.block-with-text:before {
  /* points in the end */
  content: '...';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of block */
  right: 0;
  bottom: 0;
}

/* hide ... if we have text, which is less than or equal to max lines */
.block-with-text:after {
  /* points in the end */
  content: '';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of text */
  right: 0;
  /* set width and height */
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  /* bg color = bg color under block */
  background: white;
}
0

Moderne CSS-Rasterantwort

Den voll funktionsfähigen Code auf CodePen anzeigen. Gegeben das folgende HTML:

<div class="container">
    <p>Several paragraphs of text...</p>
</div>

Sie können das CSS-Grid verwenden, um drei Spalten zu erstellen und dem Container mitzuteilen, dass die mittlere Spalte, die unseren Absatz enthält, eine maximale Breite von 70 Zeichen hat.

.container
{
  display: grid;
  grid-template-columns: 1fr, 70ch 1fr;
}

p {
  grid-column: 2 / 3;
}

So sieht es aus (Checkout CodePen für ein voll funktionsfähiges Beispiel):

 enter image description here

Hier ist ein weiteres Beispiel, in dem Sie mit minmax einen Wertebereich festlegen können. Auf kleinen Bildschirmen wird die Breite auf 50 Zeichen und auf großen Bildschirmen auf 70 Zeichen festgelegt.

.container
{
  display: grid;
  grid-template-columns: 1fr minmax(50ch, 70ch) 1fr;
}

p {
  grid-column: 2 / 3;
}