Я делаю адаптивный сайт для школы, и мой вопрос:

Как установить максимальную длину символов в предложениях (с CSS) на моем веб-сайте (например, 75 символов), чтобы при большом экране предложения не превышали 75 символов.

Я пробовал максимальную ширину, но это портит мой макет. Я использую flexbox и медиа-запросы, чтобы сделать его отзывчивым.

Вы всегда можете использовать метод усечения, установив 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>

Попробуйте это для усечения символов после установки максимальной ширины. Я использовал 75ч в этом случае

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

Мы будем использовать webkit css для этого. Короче говоря, 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-зажим :

     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 -broken-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, Concetetur 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 Grid Ответ

Посмотреть полностью рабочий код на 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>

Попробуйте мое решение с 2 различными способами.

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