Tworzę responsywną stronę internetową dla szkoły, a moje pytanie brzmi:

Jak ustawić maksymalną długość znaków zdań (z CSS) na mojej stronie (np. 75 znaków), że gdy mam bardzo duży ekran, zdania nie będą przekraczać 75 znaków.

Próbowałem maksymalnej szerokości, ale to popsuło mój układ. Korzystam z Flexboksa i zapytań o media, aby reagować.

Zawsze możesz użyć metody obcinania, ustawiając max-widthi przepełnienie w ellipsisten sposób

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

Przykład: http://jsfiddle.net/3czeyznf/

W przypadku obcinania wielu linii spójrz na flexrozwiązanie. Przykład z obcięciem w 3 rzędach.

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

Przykład: https://codepen.io/srekoble/pen/EgmyxV

Istnieje „wartość długości” CSS wynosząca ch.

Z MDN

Ta jednostka reprezentuje szerokość, a ściślej miarę wyprzedzenia, glifu „0” (zero, znak Unicode U + 0030) w czcionce elementu.

Może to przybliżać to, czego szukasz.

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>

Wypróbuj to w celu obcięcia znaków po ustawieniu go na maksymalną szerokość. W tym przypadku użyłem 75 kanałów

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>

Aby obcinać multilinię, kliknij link.

Przykład: https://codepen.io/srekoble/pen/EgmyxV

Będziemy do tego używać css webkit. W skrócie WebKit to silnik renderujący przeglądarki HTML / CSS dla Safari / Chrome. Może to być specyficzne dla przeglądarki, ponieważ każda przeglądarka jest wspierana przez silnik renderujący do rysowania strony internetowej HTML / CSS.

przykładowy kod:

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

    

W Chrome możesz ustawić liczbę linii wyświetlanych za pomocą „ -webkit-line-clamp ”:

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

Więc dla mnie jest to rozszerzenie, więc jest idealne, więcej informacji tutaj: https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-straight-up -break-865413f16e5

Z CSS nie jest to możliwe, w tym celu będziesz musiał użyć Javascript. Chociaż możesz ustawić szerokość p na maksymalnie 30 znaków, a kolejne litery będą automatycznie zmniejszane, ale znowu nie będzie to tak dokładne i będzie się różnić, jeśli znaki będą pisane wielkimi literami.

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

WYNIK

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

Jsfiddle

Czyste rozwiązanie CSS do obcinania znaków wieloliniowych

Miałem podobny problem i znalazłem to doskonałe rozwiązanie tylko dla css z Hackingui.com . Możesz przeczytać artykuł w celach informacyjnych, ale poniżej znajduje się główny kod.

Przetestowałem to i działa idealnie. Mam nadzieję, że ktoś uzna to za przydatne przed wyborem JS lub opcji po stronie serwera

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

Nowoczesna odpowiedź sieci CSS

Zobacz w pełni działający kod w CodePen . Biorąc pod uwagę następujący kod HTML:

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

Możesz użyć siatki CSS, aby utworzyć trzy kolumny i powiedzieć kontenerowi, aby wziął maksymalną szerokość 70 znaków dla środkowej kolumny, która zawiera nasz akapit.

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

p {
  grid-column: 2 / 3;
}

Tak to wygląda (Checkout CodePen dla w pełni działającego przykładu):

Oto kolejny przykład, w którym możesz użyć minmax, aby ustawić zakres wartości. Na małych ekranach szerokość zostanie ustawiona na 50 znaków, a na dużych ekranach - na 70 znaków.

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

p {
  grid-column: 2 / 3;
}

Ten post dotyczy rozwiązania CSS, ale post jest dość stary, więc na wypadek, gdyby inni natknęli się na to i używali nowoczesnego frameworka JS, takiego jak Angular 4+, istnieje prosty sposób, aby to zrobić za pomocą Angular Pipes bez konieczności zadzieraj z CSS.

Prawdopodobnie istnieją również sposoby „React” lub „Vue”. Ma to na celu pokazanie, jak można to zrobić w ramach.

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>

Wypróbuj moje rozwiązanie na 2 różne sposoby.

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