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

Wie stelle ich eine maximale Zeichenlänge der Sätze (mit CSS) auf meiner Website ein (z. B. 75 Zeichen), damit die Sätze bei einem sehr großen Bildschirm nicht weiter als 75 Zeichen gehen.

Ich habe versucht, eine maximale Breite zu erreichen, aber das bringt mein Layout durcheinander. Ich verwende Flexbox- und Medienabfragen, um darauf zu reagieren.

Sie können jederzeit eine Methode zum Abschneiden verwenden, indem Sie a max-widthund einen solchen Überlauf ellipsisfestlegen

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

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

Schauen Sie sich für eine mehrzeilige Kürzung eine flexLö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

Es gibt einen CSS-Längenwert von ch.

Von MDN

Diese Einheit repräsentiert die Breite oder genauer das Vorwärtsmaß des Glyphen '0' (Null, das Unicode-Zeichen U + 0030) in der Schriftart des Elements.

Dies kann ungefähr das sein, 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>

Versuchen Sie dies, um Zeichen abzuschneiden, nachdem Sie sie auf 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>

Zum mehrzeiligen Abschneiden folgen Sie bitte dem Link.

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

Wir werden dafür Webkit CSS verwenden. Kurz gesagt, WebKit ist eine HTML / CSS-Webbrowser-Rendering-Engine für Safari / Chrome. Dies kann brower-spezifisch sein, da jeder Browser von einer Rendering-Engine zum Zeichnen der HTML / CSS-Webseite unterstützt wird.

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>

    

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

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

Für mich ist es also eine Erweiterung, damit es perfekt ist. Weitere Informationen finden Sie hier: https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-straight-up -broken-865413f16e5

Mit CSS ist das nicht möglich, dafür müssen Sie das Javascript verwenden. Sie können die Breite des p zwar auf bis zu 30 Zeichen einstellen und die nächsten Buchstaben werden automatisch angezeigt, aber auch dies ist nicht so genau und variiert, wenn die Zeichen in Großbuchstaben geschrieben sind.

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 sitzen amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et ...

Jsfiddle

Reine CSS-Lösung zum Abschneiden mehrzeiliger Zeichen

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

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

  /* 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;
}

Moderne CSS-Grid-Antwort

Zeigen Sie den voll funktionsfähigen Code auf CodePen an . Angesichts des folgenden HTML:

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

Sie können CSS Grid verwenden, um drei Spalten zu erstellen und den Container anzuweisen, für die mittlere Spalte, die unseren Absatz enthält, eine maximale Breite von 70 Zeichen zu verwenden.

.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):

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 eingestellt.

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

p {
  grid-column: 2 / 3;
}

Dieser Beitrag ist für eine CSS-Lösung gedacht, aber der Beitrag ist ziemlich alt. Für den Fall, dass andere darauf stoßen und ein modernes JS-Framework wie Angular 4+ verwenden, gibt es eine einfache Möglichkeit, dies über Angular Pipes zu tun, ohne dies zu tun mit CSS herumspielen.

Es gibt wahrscheinlich auch "React" - oder "Vue" -Methoden, um dies zu tun. Dies ist nur, um zu zeigen, wie es innerhalb eines Rahmens gemacht werden könnte.

truncate-text.pipe.ts

/**
 * Helper to truncate text using JS in view only.
 *
 * This is pretty difficult to do reliably with CSS, especially when there are
 * multiple lines.
 *
 * Example: {{ value | truncateText:maxLength }} or {{ value | truncateText:45 }}
 *
 * If maxLength is not provided, the value will be returned without any truncating. If the
 * text is shorter than the maxLength, the text will be returned untouched. If the text is greater
 * than the maxLength, the text will be returned with 3 characters less than the max length plus
 * some ellipsis at the end to indicate truncation.
 *
 * For example: some really long text I won't bother writing it all ha...
 */
@Pipe({ name: 'truncateText' })
export class TruncateTextPipe implements PipeTransform {
  transform(value: string, ...args: any[]): any {
    const maxLength = args[0]
    const maxLengthNotProvided = !maxLength
    const isShorterThanMaximumLength = value.length < maxLength
    if (maxLengthNotProvided || isShorterThanMaximumLength) {
      return value
    }
    const shortenedString = value.substr(0, maxLength - 3)
    return `${shortenedString}...`
  }
}

app.component.html

<h1>{{ application.name | truncateText:45 }}</h1>

Probieren Sie meine Lösung auf zwei verschiedene Arten 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;
}