Обрезать текст css: CSS: обрезка текста с многоточием и без — Блог

Leave a Comment / Css / By /

html — Использование line-clamp для родителя, обрезать текст у child

Вопрос задан

Изменён 11 месяцев назад

Просмотрен 78 раз

Есть такая необходимость с помощью line-clamp обрезать текст. Но нюанс что неизвестно сколько в родителя попадут абзацев и сколько строк в каждом будет, поэтому хотелось отслеживать строки у родителя, но у родителя это свойство получается не будет работать?

                    <div>
                        <p>
                            И нет сомнений, что активно развивающиеся страны третьего мира, 
                            которые представляют собой яркий пример континентально-европейского 
                            И нет сомнений, что активно развивающиеся страны третьего мира, 
                            которые представляют собой яркий пример континентально-европейского
                            И нет сомнений, что активно развивающиеся страны третьего мира
                        </p>
                        <p>
                            И нет сомнений, что активно развивающиеся страны третьего мира, 
                            которые представляют собой яркий пример континентально-европейского 
                            И нет сомнений, что активно развивающиеся страны третьего мира, 
                            которые представляют собой яркий пример континентально-европейского
                            И нет сомнений, что активно развивающиеся страны третьего мира
                        </p>
                        <p>
                            И нет сомнений, что активно развивающиеся страны третьего мира, 
                            которые представляют собой яркий пример континентально-европейского 
                            И нет сомнений, что активно развивающиеся страны третьего мира, 
                            которые представляют собой яркий пример континентально-европейского
                            И нет сомнений, что активно развивающиеся страны третьего мира
                        </p>
                    </div>

на примере хотелось бы в html__content обрезать текст на 8 строке уже. Но текст находится у детей. Если обращаться только к детям и обрезать на 4й строке то получается будет 2 места с многоточием у первого и второго абзаца. Вопрос в том можно ли как то применить данное свойство именно к родителю? То есть 5 строк от первого <p> и 3 строки от второго. Или этот вопрос по другому решается?

  • html
  • css

Только если сделать абзацы inline-элементами:

.html__content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  overflow:hidden;
}
.html__content p {
  display: inline;
}
.html__content p::after {
  content:'\00000a'; 
  white-space: pre-wrap;
}
<div>
  <p>И нет сомнений, что активно развивающиеся страны третьего мира, которые представляют собой яркий пример континентально-европейского И нет сомнений, что активно развивающиеся страны третьего мира, которые представляют собой яркий пример континентально-европейского
И нет сомнений, что активно развивающиеся страны третьего мира</p>
<p>И нет сомнений, что активно развивающиеся страны третьего мира, которые представляют собой яркий пример континентально-европейского И нет сомнений, что активно развивающиеся страны третьего мира, которые представляют собой яркий пример континентально-европейского
И нет сомнений, что активно развивающиеся страны третьего мира</p>
<p>И нет сомнений, что активно развивающиеся страны третьего мира, которые представляют собой яркий пример континентально-европейского И нет сомнений, что активно развивающиеся страны третьего мира, которые представляют собой яркий пример континентально-европейского
И нет сомнений, что активно развивающиеся страны третьего мира</p>
</div>

4

А ты перед тем как задать вопрос, проверял? У меня всё работает:

main {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  overflow: hidden;
}
<main>
  <p>И нет сомнений, что активно развивающиеся страны третьего мира, которые представляют собой яркий пример континентально-европейского И нет сомнений, что активно развивающиеся страны третьего мира, которые представляют собой яркий пример континентально-европейского
И нет сомнений, что активно развивающиеся страны третьего мира</p>
  <p>И нет сомнений, что активно развивающиеся страны третьего мира, которые представляют собой яркий пример континентально-европейского И нет сомнений, что активно развивающиеся страны третьего мира, которые представляют собой яркий пример континентально-европейского
И нет сомнений, что активно развивающиеся страны третьего мира</p>
  <p>И нет сомнений, что активно развивающиеся страны третьего мира, которые представляют собой яркий пример континентально-европейского И нет сомнений, что активно развивающиеся страны третьего мира, которые представляют собой яркий пример континентально-европейского
И нет сомнений, что активно развивающиеся страны третьего мира</p>
</main>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как справляться с коротким и длинным контентом в CSS [часть 2]

Все статьи | Дневник студента

Статья написана студентом Хекслета. Мнение автора может не совпадать с позицией редакции

Введение

В этой части мы рассмотрим типовые ситуации, в которых возникает проблема со слишком длинным или слишком коротким контентом.

Примеры

1) Карточка профиля

Простой пример, в котором мы не можем заранее предсказать длину имени. Как же нам тогда поступить?

/* Решение 1 */
.card__title {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
/* Решение 2 */
.card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Можно обрезать текст еще в первой строке, а можно растянуть его на несколько и только потом усечь.

2) Навигационные элементы

Частая проблема, если делать многоязычный сайт. Иногда возникает ситуация, что какое-то слово (в нашем случае это «About») значительно длиннее при раскладке LTR (left-to-right) чем RTL (right-to-left). Тогда мы получаем слишком маленькую интерактивную зону клика, что не есть хорошо.

Для решения данной ситуации достаточно не забывать использовать min-width.

.nav__item {
  min-width: 50px;
}

3) Продукты в корзине покупателя

Названия продуктов могут варьироваться от одной до нескольких строк. В примере ниже название продукта слишком близко к кнопке «закрыть» из-за недостаточного размера отступов между ними.

Такое обычно решается добавлением margin к внутреннему блоку с текстом или добавлением padding к блоку-обложке.

.product__name {
  margin-right: 1rem;
}

4) Flexbox и длинный контент

Если пример из прошлого пункта показался вам слишком простым, то сейчас вы поймете, что не все вещи бывают такими очевидными. Рассмотрим следующий пример:

HTML:

    Ahmad Shadeed
  Follow

CSS:

.user {
  display: flex;
  align-items: flex-start;
}
.user__name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

Вот что произойдет, если имя станет слишком длинным:

Казалось бы: почему так? Мы ведь сделали все, о чем говорили в первой части данного топика, но получилось совсем не то, чего мы ожидали.

Все дело в том, что по умолчанию флекс-элементы не могут сжиматься меньше длины своего контента. Для решения этой проблемы нужно установить min-width:

.user__meta {
  /* other styles */
  min-width: 0;
}

Онлайн-пример (классы немного отличаются, но суть та же): https://codepen.io/kava13/pen/YzpqLoG

Заключение

Надеюсь, что вы узнали о некоторых методах работы с длинным и коротким контентом. Вы сможете подглядывать сюда и находить какие-то похожие аналоги, когда у вас возникнет неявная ситуация в верстке! 🙂

Александр Ковалец 09 февраля 2021

Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Профессия

с нуля

Фронтенд-разработчик

Разработка фронтенд-компонентов для веб-приложений

17 ноября 10 месяцев

Профессия

с нуля

Python-разработчик

Разработка веб-приложений на Django

17 ноября 10 месяцев

Профессия

с нуля

Java-разработчик

Разработка приложений на языке Java

17 ноября 10 месяцев

Профессия

с нуля

PHP-разработчик

Разработка веб-приложений на Laravel

17 ноября 10 месяцев

Профессия

с нуля

Инженер по тестированию

Ручное тестирование веб-приложений

17 ноября 4 месяца

Профессия

с нуля

Node. js-разработчик

Разработка бэкенд-компонентов для веб-приложений

17 ноября 10 месяцев

Профессия

с нуля

Fullstack-разработчик

Разработка фронтенд- и бэкенд-компонентов для веб-приложений

17 ноября 16 месяцев

Профессия

c опытом

Разработчик на Ruby on Rails

Создание веб-приложений со скоростью света

17 ноября 5 месяцев

Профессия

с нуля

Верстальщик

Верстка с использованием последних стандартов CSS

в любое время 5 месяцев

Профессия

Новый с нуля

Онлайн-буткемп. Фронтенд-разработчик

Интенсивное обучение профессии в режиме полного дня

1 декабря 4 месяца

Please enable JavaScript to view the comments powered by Disqus.

переполнение текста | CSS-трюки — CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

Свойство text-overflow в CSS имеет дело с ситуациями, когда текст обрезается, когда он выходит за пределы поля элемента. Его можно обрезать (то есть обрезать, скрыть), отображать многоточие («…», значение диапазона Unicode U+2026) или отображать определенную автором строку (текущий браузер не поддерживает строки, определенные автором).

 .многоточие {
  переполнение текста: многоточие;

  /* Требуется, чтобы text-overflow делал что-либо */
  пробел: nowrap;
  переполнение: скрыто;
}

Обратите внимание, что text-overflow происходит только тогда, когда свойство контейнера overflow имеет значение hidden , scroll или auto и white-space: nowrap; .

Переполнение текста может происходить только в блочных или встроенных блочных элементах, потому что элемент должен иметь ширину, чтобы его можно было переполнить. Переполнение происходит в направлении, определяемом свойством direction или связанными атрибутами.

В следующей демонстрации показано поведение свойства text-overflow , включая все возможные значения. Поддержка браузеров различается!

 Проверьте эту ручку! 
 Настройка  overflow  на  scroll  или  auto  отобразит полосы прокрутки для отображения дополнительного текста, а  hidden  не будет. Скрытый текст можно выделить, выбрав многоточие. 
  
 Old Stuff 
 
 В старой версии спецификации говорится, что вы можете использовать URL-адрес изображения для многоточия, но похоже, что это было исключено. 
 
 Существует синтаксис с двумя значениями, например.  переполнение текста: многоточие многоточие;  , который контролировал бы переполнение с левой и правой сторон одного и того же контейнера. Я не уверен, как этого можно достичь. Возможно, текст по центру в слишком маленьком контейнере? В новой спецификации говорится, что это, как и определение строки, «подвержено риску».  
 
 Я не уверен, откуда взялось  многоточие-слово . Этого нет ни в спецификации, ни в какой-либо другой документации, кроме как на WebPlatform.org. 
 
 Свойство  text-overflow   раньше было сокращением  для комбинации  text-overflow-mode  и  text-overflow-ellipsis  , но больше не существует, и этих отдельных свойств не существует. 
 
 Связанные свойства 
  
     
  •   пробел  
    • 
 
  •   переполнение  
    • 
 
  •   разрыв слова  
    • 
 
  •   ширина  
    • 
 
  
 Другие ресурсы 
  
     
  •   W3C  Рекомендация кандидата, спецификация 
    • 
 
  •  Документы MDN 
    • 
 
  •  Документы веб-платформы 
    • 
 
  •  Caniuse.com 
    • 
 
  •  Линия CSS-Tricks Clampin’ 
    • 
 
  •  Управление многострочным многоточием в Pure CSS 
    • 
 
  •  Обрезать строку с многоточием 
    • 
 
  
 Поддержка браузера 
  
  
  Chrome 
  Сафари 
  Фаерфокс 
  Опера 
  ИЭ 
  Андроид 
  iOS 
 
   
  25+ 
  5. 1+ 
  19+ 
  12.1+ 
  IE8+ 
  2.1+ 
  3.2+ 
 
  
  
 html — обрезать слишком длинный текст внутри div 
  

                        спросил
                          
 

                        Изменено
                        2 года, 10 месяцев назад
 
 

                        Просмотрено
                        210 тысяч раз
 
 
 <дел>
очень длинный текст

любой способ использовать чистый css, чтобы вырезать слишком длинный текст, а не показывать его на следующей новой строке и отображать только максимум 100px

  • html
  • css

Вы можете использовать:

 overflow:hidden;

, чтобы скрыть текст за пределами зоны.

Обратите внимание, что последняя буква может быть обрезана (поэтому часть последней буквы все равно будет отображаться). Более приятный способ — отобразить многоточие в конце. Вы можете сделать это, используя text-overflow :

 overflow: hidden;
пробел: nowrap; /* Не забудьте об этом */
переполнение текста: многоточие;

4

 
longlong longlong longlong longlong longlong longlong 
​

Это один из возможных подходов, который я могу придумать

 .crop {width:100px;overflow:hidden;height:50px;line-height:50px;}​

Таким образом, длинный текст по-прежнему будет переноситься, но не будет виден из-за overflow set, а установив line-height так же, как height , мы гарантируем, что будет отображаться только одна строка.

См. демонстрацию здесь и хорошее описание свойства переполнения с интерактивными примерами.

1

 .кроп {
  переполнение: скрыто;
  белое пространство: nowrap;
  переполнение текста: многоточие;
  ширина: 100 пикселей;
}​

http://jsfiddle. net/hT3YA/

Почему бы не использовать относительные единицы измерения?

 .кроптекст {
    максимальная ширина: 20em;
    пробел: nowrap;
    переполнение: скрыто;
    переполнение текста: многоточие;
}

Код ниже скроет ваш текст с фиксированной шириной, которую вы выберете. но не совсем подходит для адаптивного дизайна.

 .CropLongTexts {
  ширина: 170 пикселей;
  пробел: nowrap;
  переполнение: скрыто;
  переполнение текста: многоточие;
}

Обновление

Я заметил в (мобильных) устройствах, что текст (смешанный) друг с другом из-за (фиксированной ширины)… поэтому я отредактировал приведенный выше код, чтобы он стал скрытым, как показано ниже:

 .CropLongTexts {
  максимальная ширина: 170 пикселей;
  пробел: nowrap;
  переполнение: скрыто;
  переполнение текста: многоточие;
}

(max-width) гарантирует, что текст будет скрыт независимо от (размера экрана) и не будет смешиваться друг с другом.