Я роблю чуйний веб-сайт для школи, і моє запитання:

Як я можу встановити на своєму веб-сайті максимальну довжину символів (за допомогою CSS) (наприклад, 75 символів), що коли у мене дуже великий екран, пропозиції не перевищуватимуть 75 символів.

Я спробував максимальну ширину, але це зіпсувало мою компоновку. Я використовую запити флешбоксу та медіа, щоб зробити його чутливим.

Ви завжди можете використовувати метод усікання, встановивши а max-widthта переповнення ellipsisтаким чином

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

Приклад: http://jsfiddle.net/3czeyznf/

Для багаторядкового усікання розгляньте flexрішення. Приклад з усіченням на 3 ряди.

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

Приклад: https://codepen.io/srekoble/pen/EgmyxV

Існує "значення довжини" CSS ch.

Від MDN

Ця одиниця представляє ширину, а точніше попередню міру гліфа '0' (нуль, символ Unicode U + 0030) у шрифті елемента.

Це може приблизно відповідати тому, що ви хочете.

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>

Спробуйте це для обрізання символів після встановлення його на максимальну ширину. Я використовував 75ch у цьому випадку

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>

Для багаторядкових транкінгування перейдіть за посиланням.

Приклад: https://codepen.io/srekoble/pen/EgmyxV

Для цього ми будемо використовувати css webkit. Коротше кажучи, WebKit - це система відображення веб-браузерів HTML / CSS для Safari / Chrome. Це може бути специфічно для веб-переглядача, оскільки кожен браузер підтримується механізмом візуалізації для малювання веб-сторінки HTML / CSS.

приклад коду:

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

    

За допомогою Chrome ви можете встановити кількість рядків, що відображаються за допомогою " -webkit-line-clamp ":

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

Тож для мене це використання в розширенні, щоб воно було ідеальним, більше інформації тут: https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-straight-up -розбита-865413f16e5

З CSS це неможливо, для цього доведеться використовувати Javascript. Хоча ви можете встановити ширину p до 30 символів, і наступні літери автоматично зійдуть, але знову це не буде настільки точним і буде змінюватися, якщо символи знаходяться з великої літери.

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

РЕЗУЛЬТАТ

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

Jsfiddle

Чисте рішення CSS для обрізання багаторядкових символів

У мене була подібна проблема, і я знайшов це відмінне рішення для CSS від Hackingui.com . Ви можете прочитати статтю для інформації, але нижче основний код.

Я перевірив це, і він працює чудово. Сподіваємось, хтось вважає це корисним перед тим, як вибрати варіант JS або на стороні сервера

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

Сучасний відповідь сітки CSS

Перегляньте повністю працюючий код на CodePen . Враховуючи такий HTML:

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

Ви можете використовувати CSS Grid для створення трьох стовпців і наказати контейнеру взяти максимальну ширину 70 символів для середнього стовпця, який містить наш абзац.

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

p {
  grid-column: 2 / 3;
}

Ось як це виглядає (Checkout CodePen для повністю працюючого прикладу):

Ось ще один приклад, коли ви можете використовувати minmax для встановлення діапазону значень. На маленьких екранах ширина буде встановлена ​​на 50 символів, а на великих - на 70 символів.

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

p {
  grid-column: 2 / 3;
}

Цей пост призначений для CSS-рішення, але він є досить старим, тому на всякий випадок, якщо інші натрапляють на це і використовують сучасний фреймворк JS, такий як Angular 4+, є простий спосіб зробити це через Angular Pipes без необхідності возитися з CSS.

Ймовірно, є також "Реагувати" або "Vue" способи зробити це. Це лише для того, щоб показати, як це можна зробити в рамках.

усікати-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>

Спробуйте моє рішення двома різними способами.

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