Как ограничить текст по ширине css
Перейти к содержимому

Как ограничить текст по ширине css

  • автор:

Ограничение текста по ширине/высоте

Author24 — интернет-сервис помощи студентам

Интересует, как ограничить текст по ширине, в плане того, что достигает скажем 250px и появляется многоточие, а весь оставшийся текст открывается по исполняющему скрипту, также интересно как данный момент реализоваться по высоте, к примеру на пятой строке такое ограничение возникает.

Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Видео по ширине и высоте экрана
Есть видео, нужно растянуть его по высоте и ширине экрана. Как это сделать? <video autoplay loop.

Градиент не растягивается на 100% по высоте и ширине
Значить, прописываю градиент тегу body а он не растягивается на всю ширину и высоту как если просто.

Как отцентрировать img по высоте и ширине в div?
как отцентрировать img по высоте и ширине в div со статическими размерами, если изображение больше.

Шрифт в CSS определяется по высоте или ширине?
Вот столкнулся с проблемой — есть ведь 1280*1024, а есть 1280*800, а шрифт надо чтоб выглядел.

633 / 475 / 170
Регистрация: 26.05.2016
Сообщений: 2,637

1 2 3
overflow: hidden; max-width: значение; max-height: значение;

228 / 208 / 27
Регистрация: 18.02.2010
Сообщений: 2,014
overflow: hidden; это сдорово это мы всё знаем, но задача как вы бы могли заметить немного другая.

Эксперт HTML/CSS

2253 / 1639 / 644
Регистрация: 07.08.2016
Сообщений: 3,945

Лучший ответ

Сообщение было отмечено Mailo как решение

Решение

p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates libero, architecto rerum a velit dolor delectus ex beatae minima asperiores temporibus neque ad corrupti sint laboriosam vero facere. Natus, id./p>
1 2 3 4 5 6
p{ width: 250px; overflow: hidden; white-space: nowrap; text-overflow:ellipsis; }

Для ограничения по вертикали штатных средств, к сожалению, нет. Придется пользоваться костылями.
228 / 208 / 27
Регистрация: 18.02.2010
Сообщений: 2,014
А что за костыли, если не секрет?

Эксперт HTML/CSS

2253 / 1639 / 644
Регистрация: 07.08.2016
Сообщений: 3,945

ЦитатаСообщение от Mailo Посмотреть сообщение

А что за костыли, если не секрет?

Например ограничивать блок с текстом по высоте, прописывать overflow:hidden; и добавлять многоточие с помощью псевдоэлементов с абсолютным позиционированием

Эксперт JSЭксперт HTML/CSS

2631 / 1711 / 744
Регистрация: 13.03.2010
Сообщений: 5,738
Или по количеству символов (jQuery):

1 2 3 4 5 6
var quan = 20, textBlock = $('.textblock'), textContent = textBlock.text(); if (textContent.length > quan) { textBlock.text(textContent.slice(0, quan) + '. '); }
div class="textblock">Добавляет многоточие, если больше 20 символов в диве./div>

87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Обрезать картинку по ширине и высоте, используя родительский блок
Добрый день. Есть картинка 250х180 . Есть div внутри которого img . Размер блока img-img : 220×100.

Выравнивание блоков на 100% по ширине и высоте без зазоров и отступов
Ребят, я начинаю свой путь в верстке и постоянно сталкиваюсь с проблеммой выравнивания блоков на.

Сделать один столбец статичным по высоте и ширине, а остальные адаптивными
Господа веб-мастера, подскажите как сделать один столбец статичным по высоте и ширине, а остальные.

Убрать ограничение по высоте страниц сайта
Добрый день, уважаемые гуру CSS! Столкнулся с проблемой на сайте — где-то есть, видимо, значение.

Или воспользуйтесь поиском по форуму:

Как ограничить ширину текста

Я хотел бы ограничить ширину блока текста, чтобы выглядело так, будто у него есть br в недрах каждой строки.

Что-то вроде этого:

Texttttttttttttttttttttt tttttttttttttttttttttttt tttttttttttttttttttttttt 

Я пытался указать ширину div или p, но это не сработало для меня. Есть предложения?

Поделиться Источник 14 марта 2013 в 12:33

10 ответов

Вы можете применить CSS так:

Обычно браузер не ломает слова, но word-wrap: break-word; заставит его также ломать слова.

Больше информации о word-wrap

Поделиться 14 марта 2013 в 12:36

 display: inline-block; max-width: 80%; height: 1.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 

Поделиться 31 августа 2017 в 06:52

Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt

Поделиться 14 марта 2013 в 12:36

Вы можете использовать word-wrap : break-word;

Поделиться 14 марта 2013 в 12:36

используйте свойство css word-wrap: break-word;

Поделиться 14 марта 2013 в 12:37

Это не сработало в моем случае. Это работало нормально после добавления следующего стиля.

Поделиться 26 августа 2013 в 14:58

Многие ответы здесь очень хороши и довольно похожи. Моя забота заключалась в указании ширины в пикселях, что означает, что текст может выглядеть скрупулезно на экранах с высоким разрешением. Лучше указывать ширину с точки зрения максимальных символов в строке. Мне также нравится указывать стиль внутри для небольших, однострочных проектов index.html. Для реалистичных проектов, вне курса, стиль должен быть в отдельном файле CSS.

Поделиться 14 марта 2013 в 12:38

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

посмотрите на это:Hyphenator.js и это демо.

Поделиться 14 марта 2013 в 12:39

word-break:break-all; 

Как ограничить длину текста с помощью css

При разработке сайтов нередки случаи, когда требуется ограничивать длину текста Например, если вы используете дивовую верстку с float: left, в которой высота каждого дива должна быть одинаковой.

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

С помощью стилей мы можем задать любому тексту определенную высоту, зайдя за которую, текст как бы обрезается и общая высота остается одинаковой для всех элементов. Рассмотрим два css метода реализации:

1. Ограничить высоту блока с текстом

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

Здесь какой-то длинный текст, например в 600 символов.

С помощью overflow: hidden; обрезается все, что превышает высоту дива в height: 31px; За счет font-size и line-height вы можете регулировать междустрочный интервал и размер шрифта, чтобы в данный див влезало, к примеру ровно две строки.

2. Ограничиваем длину текста с помощью text-overflow

Это дасточно новый метод, который я использую недавно. Он позволяет ограничивать высоту текста по строкам. Рассмотрим пример (только стиль):

Здесь задан класс .zagolovok, который мы можем назначить на любой тег. В итоге, если текст будет больше двух строк, то он автоматически обрежется, а после него пропишется знак многоточия. Количество строк задается с помощью line-clamp. Заметьте, здесь нам не приходится использовать height для принудительного обрезания по высоте.

Так как количество строк будет везде одинаковым, то высота текста также окажется одного размера.

Можно ли ограничить ширину текста, шириной картинки?

60fab30232cfd520937864.jpeg

Есть идеи как ограничить ширину текста, шириной картинки, без указания фиксированной ширины?

 
Поездка на квадроциклах

Поездка на квадроциклах

Вы поедете в горы на несколько часов.

от 15 000 рублей

CSS не вставляю, там только font-size

Пробовал, задавать gallery-card__text-block, max-width: 100%, что-то не работает

JS не как вариант не предлагать — это я могу реализовать сам — понимаю и знаю как, реализую в крайнем случае.

Есть ли идеи по CSS?

  • Вопрос задан более двух лет назад
  • 290 просмотров

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *