Многострочный усеченный текст с "..." в конце

Мне нужна помощь с многострочным усеченным текстом. Я не могу вырезать последнее слово с помощью "..." в текстовом блоке со случайным номером строки.

Итак, это мое решение, которое обрезало конец моего блока, но без "..."

      <ul className = "note__tags">
        {tags.map((item) => (
          <li className = "note__tag-item">{item}</li>
        ))}
      </ul>

 &__text {
    @include manrope-15($size: 15px, $weight: 500, $color: $grey-blue);
    width: 270px;
    max-height: 192px;
    overflow: hidden;
    white-space: wrap;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    position: relative;
}

И я попробовал что-то подобное, но это выглядело странно и негибко.

 &__text {
    @include manrope-15($size: 15px, $weight: 500, $color: $grey-blue);
    width: 270px;
    max-height: 192px;
    overflow: hidden;
    white-space: wrap;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    position: relative;

    &::after {
      content:"...";
      position: absolute;
      bottom: 0;
      right: 40px;
      color: black;
    }
}

Пожалуйста, уточните вашу конкретную проблему или предоставьте дополнительную информацию, чтобы выделить именно то, что вам нужно. Поскольку сейчас написано, трудно точно сказать, о чем вы спрашиваете.

— 18.07.2024 04:43

См. css-tricks.com/almanac/properties/l/line-clamp. Вам нужно будет использовать -webkit-line-clamp. Благодаря префиксу -webkit- он имеет широкую поддержку браузеров.

— 18.07.2024 06:40

css

18.07.2024 00:08

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Я не совсем понимаю, что такое «случайное строковое число», но если вы имеете в виду «длинную строку случайных чисел», попробуйте следующее:

.content {
  width: 12rem;
  border: 1px solid red;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.break-all {
  word-break: break-all;
}

<div class = "content line-clamp-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea tempore repellendus ut consequatur dolorem ducimus.</div>
<div class = "content line-clamp-2 break-all">1234512345123451234512345123451234512345123451234512345123451234512345</div>
<div class = "content line-clamp-2 break-all">The longest word is pneumonoultramicroscopicsilicovolcanoconiosis</div>

Вы можете изменить количество отображаемых строк с помощью -webkit-line-clamp: <integer [1,∞]>.

18.07.2024 07:15

Чтобы добиться эффекта многострочного усеченного текста с многоточием в конце, вы можете использовать свойство CSS -webkit-line-clamp вместе с моделью отображения -webkit-box.

.line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: var(--line-clamp, 1);
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div class = "line-clamp" style = "--line-clamp: 3;">
  This is a long paragraph that will be clamped after three lines of text, showing ellipsis at the end. This is a long paragraph that will be clamped after three lines of text, showing ellipsis at the end.This is a long paragraph that will be clamped after three lines of text, showing ellipsis at the end.This is a long paragraph that will be clamped after three lines of text, showing ellipsis at the end.This is a long paragraph that will be clamped after three lines of text, showing ellipsis at the end.This is a long paragraph that will be clamped after three lines of text, showing ellipsis at the end.This is a long paragraph that will be clamped after three lines of text, showing ellipsis at the end.This is a long paragraph that will be clamped after three lines of text, showing ellipsis at the end.This is a long paragraph that will be clamped after three lines of text, showing ellipsis at the end.This is a long paragraph that will be clamped after three lines of text, showing ellipsis at the end.This is a long paragraph that will be clamped after three lines of text, showing ellipsis at the end.This is a long paragraph that will be clamped after three lines of text, showing ellipsis at the end.This is a long paragraph that will be clamped after three lines of text, showing ellipsis at the end.This is a long paragraph that will be clamped after three lines of text, showing ellipsis at the end.
</div>

Вы используете количество строк, но в моем случае это случайное число.

— 18.07.2024 22:46

18.07.2024 07:55

Ответ принят как подходящий

вы хотите обрезать текст по количеству строк, а не по количеству символов. Если вам нужно усечь символы, вы можете соответствующим образом изменить код JavaScript.

<div class = "note__text">
  {your_text_here}
</div>

.note__text {
  @include manrope-15($size: 15px, $weight: 500, $color: $grey-blue);
  width: 270px;
  max-height: 192px;
  overflow: hidden;
  white-space: wrap;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  position: relative;
}

const textElement = document.querySelector('.note__text');
const maxHeight = 192; // adjust this value to your needs
const lineHeight = 15; // adjust this value to your needs (font size)
const linesToShow = Math.floor(maxHeight / lineHeight);

const text = textElement.textContent;
const words = text.split(' ');
let truncatedText = '';

for (let i = 0; i < words.length; i++) {
  truncatedText += words[i] + ' ';
  if (i >= linesToShow - 1) {
    truncatedText += '...';
    break;
  }
}

textElement.textContent = truncatedText.trim();