Css - css - как разместить текст в несколько строк?

Используем overflow

Чтобы свойство overflow показало себя с текстом во всей красе, надо отменить перенос текста с помощью white-space со значением nowrap . Если это не сделать, то нужного нам эффекта не будет, в тексте добавятся переносы и он будет отображаться весь целиком. В примере 1 показано, как обрезать длинный текст указанным набором стилевых свойств.

Пример 1. overflow для текста

HTML5 CSS3 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Вид текста после применения свойства overflow

Как видно из рисунка, недостаток в целом один — не очевидно что текст имеет продолжение, так что надо дать об этом понять пользователю. Для этого обычно применяется градиент или многоточие.

Решение для многострочного текста:

Но вот для обрезки многострочного текста на CSS придется прибегнуть к помощи псевдо-элементов :before

и :after

.

Box-text {
overflow: hidden;
height: 200px;
line-height: 25px;
}
.box-text:before {
content: «»;
float: left;
width: 5px;
height: 200px;
}
.box-text > *:first-child {
float: right;
width: 100%;
margin-left: -5px;
}
.box-text:after {
content: «\02026»;
box-sizing: content-box;
float: right;
position: relative;
top: -25px;
left: 100%;
width: 3em;
margin-left: -3em;
padding-right: 5px;
text-align: right;
background-size: 100% 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}

Левая сторона леса была темна, в тени; правая, мокрая, глянцевитая, блестела на солнце, чуть колыхаясь от ветра. Все было в цвету; соловьи трещали и перекатывались то близко, то далеко.

Всем привет, меня зовут Анна Блок и сегодня мы поговорим о том, как обрезать изображения, не используя графических программ.

Где это может пригодиться?

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

Яркий пример
: блог на WordPress.

Предположим, вы хотите, чтобы обложка вашей статьи имела пропорции 1:1 (квадрат). Ваши действия:

Скачаете подходящую картинку из интернета;
Обрежете ее в фотошопе до нужных пропорции;
Опубликуете статью.

Зайдя на сайт, вы увидите тот результат, который ожидали.

Но, предположим вы забыли обрезать картинку в фотошопе и выгрузили рандомное изображение в качестве обложки из интернета, что будет тогда?! Правильно, верстка сломается. А если вы совсем не использовали CSS, то картинка HD разрешения и вовсе может перекрыть весь обзор на текст

Поэтому важно уметь делать обрезку изображений при помощи CSS стилей

Давайте разберем разные ситуации того, как это можно реализовать не только при помощи CSS, но и SVG.

Отзывчивая типографика

Стало популярным использовать единицы измерения области просмотра в отзывчивой типографике — настраивать размер шрифта таким образом, чтобы он увеличивался и уменьшался в зависимости от текущего размера области просмотра. Использование единиц измерения области просмотра для определения размера шрифта имеет интересный (опасный) эффект. Как вы видите, шрифты масштабируются очень быстро — от нечитабельно-мелкого до крайне крупного размера в очень малом диапазоне.

Такое резкое масштабирование явно не подходит для повседневного использования. Нам нужно что-то более тонкое — минимальные и максимальные значения. Также нужно больше контроля над диапазонами увеличения показателя. Тут нам поможет функция calc(). Для определения базового размера шрифта мы можем использовать более стабильные единицы (скажем, 16px). Мы также можем уменьшить диапазон подстраивания значения под размер области просмотра (0.5vw). Таким образом, браузер будет выполнять следующие математические вычисления: calc(16px + 0.5vw)

Изменяя зависимость между базовым размером и размером, рассчитываемым относительно параметров области просмотра, мы можем менять скорость увеличения последнего. Попробуйте для заголовков определить большие значения единиц измерения области просмотра, нежели для остального текста, и вы увидите, насколько быстрее их размер будет увеличиваться в сравнении с окружающим текстом. Это позволяет использовать более динамичную типографику на больших экранах, в то же время ограничивая размер шрифта на мобильных устройствах. При этом не требуется никаких медиа-запросов. Этот метод также можно применить к высоте строки, что позволит корректировать междустрочный интервал со скоростью, отличной от скорости масштабирования размера шрифта.

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

Тут я поняла, что было бы здорово, если бы существовало такое свойство, как max-font-size.

Наши коллеги разработали более сложные расчеты и миксины Sass для определения точных диапазонов масштабирования размера текста через конкретные медиа-запросы. Есть несколько статей на CSS Tricks, в которых объясняется этот метод. Там же представлены фрагменты кода, которые помогут попробовать его в деле.

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

Атрибут wrap тега

Чтобы сообщить браузеру, как осуществлять перенос строк в элементе «textarea» используется
атрибут wrap, который может принимать два значения:

«soft» – строки, которые не вмещаются в поле по ширине, автоматически переносятся на
новую строку, при этом на сервер отправляется одна строка без разрывов; если же разрыв строки был добавлен при помощи клавиши
Enter, то в процессе отправки данных на сервер он сохраняется; значение используется по умолчанию;
«hard» – строки, которые не вмещаются в поле по ширине, автоматически переносятся на
новую строку, но при этом все переносы строк сохраняются в процессе отправки данных на сервер, включая и разрывы, сделанные клавишей
Enter; обязательным условием использования данного значения является наличие атрибута
cols.

Использование элемента «textarea» показано в примере №1.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<base href="https://site.name/">
	<title>Текстовое поле «textarea»</title>
</head>
<body>
	<form action="php/registration.php" method="POST" name="reg_form">
		
		<!-- Связываем текст с текстовым полем -->
		<label for="comment"> Оставить комментарий: </label><br><br>
		
		<!-- Ширина - 50 символов, высота - 10 строк -->
		<!-- Разрывы строк будут переданы на сервер -->
		<textarea id="comment" cols="50" rows="10" wrap="hard">	
			Этот текст будет предварительно отображен браузером в поле<br>
			вместе с <em>тегами</em>. Напоминает преформатированный текст.
		</textarea><br><br>
	
		<input type="submit" value="Отправить" disabled>
		
	</form>
</body>
</html>

Пример №1. Использование атрибутов элемента «textarea»

Решения на CSS для многострочного текста

Один из способов обрезки многострочного текста на CSS использует псевдо-элементы :before и :after.

Другое решение на CSS использует свойство column-w > . Оно задает ширину колонки для многостраничного текста. Вы уже, наверное, догадались, как мы будем его использовать? Правильно, мы зададим ширину колонки, равную ширине блока, а текст, который не помещается в блок, будет во второй, скрытой колонке:

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

Интересное решение для многострочного текста на CSS есть для браузеров Webkit. Для этого нужно использовать сразу несколько специфичных свойств с префиксом -webkit:

Свойство —webkit-line-clamp ограничивает количество строк, выводимых в блоке. Работает красиво и элегантно, но из-за своей специфичности в реальном проекте, конечно, такой прием не может использоваться.

АнализСкопировать ссылку

Работа с кодом — это операции написания, поиска и редактирования текста. Чтобы работать результативно, нужно преследовать две цели:

Цель №1: минимизация шанса на ошибкуСкопировать ссылку

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

Цель №2: скорость восприятия свойствСкопировать ссылку

Основной труд при написании CSS файла — это объявление значений определенных свойств. Значит, нужно иметь набор этих свойств наглядно и под рукой, в рамках одного селектора.

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

Его внимание сосредоточено только на этой функции. Так и у верстальщика — работа идет одновременно только с одним селектором

Столбик — самая наглядная запись. Он является потомком примитивного списка в столбик. Вы же не будете отрицать, что вытянутые в строку элементы списка теряют в доступности?

Например, довольно трудно найти отдельный элемент этого списка:

Гораздо проще найти нужный нам пункт в таком виде:

Не нужно думать, что HTML-верстка это нечто обособленное в плане написания кода

Обратите внимание на практики, которые используют программисты, пишущие на JavaScript, PHP или Perl. Пара в CSS — это объявление той же переменной, только с ограниченным вариантом значений

Пример JavaScript-кода:

То же самое, но в традиционном для JavaScript стиле форматирования:

Теперь давайте вернёмся и еще раз перечитаем как : ключевое слово «свойства». Нам не так часто приходится править селектор или расположение блоков с селекторами, но очень часто приходится править набор правил, иметь ввиду значение свойств, следить, какие уже объявлены, а каких еще нет

Именно поэтому важно сконцентрировать свое внимание на наборе правил

Решения на CSS для многострочного текста

Один из способов обрезки многострочного текста на CSS использует псевдо-элементы :before и :after.

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

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

Способ №3

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

HTML

<script type="text/javascript">// <![CDATA[
function collapsElement(id) {
 if ( document.getElementById(id).style.display != "none" ) {
 document.getElementById(id).style.display = 'none';
 }
 else {
 document.getElementById(id).style.display = '';
 }
 }
// ]]><script>

и это:

HTML

<div id="readmore">
 
Текст
 
 
<p style="float:right; position: absolute; bottom: -10px; right:0px;"> 
<a href="javascript: collapsElement('read_more')" style="text-decoraton:none !important;">
 Читать подробнее<a> <p>
 
 
<div id="read_more" style="display: none;">
 
Подробный текст
 
<div>
 
<div>

Как сделать красивую кнопку в HTML и CSS?

У каждого из нас свое представление о красоте: кто-то считает красивым закат на берегу моря, а кто-то — Ниссан Жук. О вкусах, как говорится, не спорят.

В моем представлении красивая кнопка — это кнопка, которая обладает следующими качествами:

Является интерактивной (т.е. реагирует на взаимодействие с ней пользователем). Отличительной чертой кнопок, является то, что их можно нажимать, следовательно у кнопки должно быть несколько состояний: дефолтное (состояние «покоя»), нажатое и «ховер» (при наведение курсора)

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

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

Если, в попытке привлечь их внимание, вы будете изобретать велосипед, пользователи могут просто не понять, что это кнопка

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

Если вы хотите узнать как сделать кнопку объемной или с эффектом «стекляшечности», как сделать картинку кнопкой и т.д. — почитайте статьи по дизайну интерфейсов за 2005-2009 гг.

Еще одним пунктом я бы добавил, расположение кнопки в привычных для посетителей местах (например, кнопки входа/регистрации в правом верхнем углу, или кнопка отправки формы под формой). Но это уже больше относится к дизайну всей страницы.

Итак, давайте для начала сделаем две обычные кнопки, одна из которых должна открывать модальное окно (кнопка-действие — ) с формой для входа, а вторая — вести на страницу регистрации (кнопка-ссылка — ). При этом обе кнопки будут выполнены в одной стилистике.

Для вывода иконок в кнопках, да и, в общем-то, везде я использую замечательный шрифт FontAwesome, а для текста — бесплатный шрифт Roboto, с которым одинаково хорошо смотрятся как кириллические, так и латинские символы.

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

Вот и все! Две симпатичные кнопки готовы.

При наличии желания и времени можно их дополнить плавными анимированными переходами. Вот несколько примеров:

А теперь обещанный бонус для тех кто дочитал этот пост до конца.

функция float для многострочного усечения текста

Возвращаясь к началу, я хочу сделать эффект перехвата многострочного текста заголовка. Очевидно, что длина заголовка не может контролироваться. Очевидно, что вышеупомянутый метод не может быть использован. Возвращаясь к сути вопроса: мы надеемся, что CSS может иметь атрибут, который может отображать многоточие, когда текст переполняется, и не отображать многоточие, когда он не переполняется. (Две формы, два эффекта)

Когда я подумал, что CSS бессилен и может быть реализован только через JS, я позже увидел метод, который был очень умным и отвечал всем упомянутым выше критериям. Ниже я расскажу, как добиться эффекта усечения многострочного текста с помощью функции float.

Основной принцип:

Есть три блока div, розовая коробка с плавающей слева, светло-синяя коробка и желтая коробка с плавающей справа,

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

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

Основной принцип заключается в следующем: мы можем представить голубую область в качестве заголовка, а желтую область — в виде эффекта эллипса. Тогда вы можете подумать, что розовая коробка занимает место. Не правда ли, что название будет отложено в целом?Выходит отрицательное значение, установите светло-голубую коробкуОтрицательное значение равно ширине розового поля, и заголовок также может отображаться в обычном режиме.

Затем мы упростили предыдущую структуру DOM в следующую:

<div class="wrap">
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos labore sit vel itaque delectus atque quos magnam assumenda quod architecto perspiciatis animi.</div>
</div>

И розовое поле, и желтое поле только что могут быть заменены псевдоэлементами.

.wrap {
  height: 40px;
  line-height: 20px;
  overflow: hidden;
}
.wrap .text {
  float: right;
  margin-left: -5px;
  width: 100%;
  word-break: break-all;
}
.wrap::before {
  float: left;
  width: 5px;
  content: '';
  height: 40px;
}
.wrap::after {
  float: right;
  content: "...";
  height: 20px;
  line-height: 20px;
     / * Это ширина трех эллипсов * /
  width: 3em;
     / * Сделать так, чтобы поле не занимало позицию * /
  margin-left: -3em;
     / * Переместить многоточие * /
  position: relative;
  left: 100%;
  top: -20px;
  padding-right: 5px;
}

Для достижения эффекта:демо-адрес

Здесь я сейчас вижу самый гениальный путь. Нужно только поддерживать возможности CSS 2.1, его преимуществами являются:

Хорошая совместимость, хорошая поддержка для основных браузеров
Адаптивное усечение, настроить на разную ширину
Многоточие отображается, когда текст превышает диапазон, в противном случае многоточие не отображается

Что касается недостатков, потому что мы имитируем многоточие, поэтому иногда положение дисплея может быть не совсем правильным, поэтому вы можете рассмотреть:

Добавьте эффект градиента, чтобы соответствовать тексту, как демонстрационный эффект выше
добавлятьЭто позволяет разделить слово при переносе, чтобы текст и многоточие были лучше.

Этот метод должен быть лучшим способом использования чистого CSS. Если у вас есть лучший метод, пожалуйста, оставьте сообщение!

Создание заголовков (h1 — h6)

Любая страница начинается с заголовка. С помощью тегов форматирования мы можем использовать разные размеры заголовков. HTML имеет шесть уровней заголовков, которые представлены тегами: <h1>, <h2>, <h3>, <h4>, <h5>, и <h6>. При отображении любого заголовка, браузер добавляет одну пустую строку до и после заголовка.

Примеры заголовков:

<h1>заголовок 1</h1>

<h2>заголовок 2</h2>

<h3>заголовок 3</h3>

<h4>заголовок 4</h4>

<h5>заголовок 5</h5>

<h6>заголовок 6</h6>

Браузер покажет это так:

Это заголовок 1

Это заголовок 2

Это заголовок 3

Это заголовок 4

Это заголовок 5

Это заголовок 6

Суперцентрирование

Самой большой проблемой в CSS всегда было размещение элементов точно по центру. Для этого приходилось писать что-то такое:

Но даже такой избыточный код иногда не давал нужных результатов, и элементы всё равно располагались не строго по центру. Теперь всё это можно заменить одной командой Её нужно сказать родительскому элементу (то есть тому, внутри которого всё должно центроваться):

Для примера сделаем блок с изменяемым содержимым, а внутри него по центру поместим надпись «Привет, это Код!». Если мы изменим размер главного блока, то содержимое автоматически подвинется в нужное место и снова окажется в центре блока.

See the Pen
01. Centered AF by Михаил Полянин (@mihail-polqnin)
on CodePen.

Вставка виджетов в текстовое поле

В можно вставлять другие виджеты помощью метода . Потребность в этом не велика, однако может быть интересна с объектами типа . Данный класс будет изучен позже. В примере ниже вставляется метка в текущую () позицию курсора.

from tkinter import *
 
def smile():
    label = Label(text=":)", bg="yellow")
    text.window_create(INSERT, window=label)
 
root = Tk()
 
text = Text(width=50, height=10)
text.pack()
 
button = Button(text=":)", command=smile)
button.pack()
 
root.mainloop()

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

Многоточие в конце текста

Вместо градиента в конце обрезанного текста также можно использовать многоточие. Причём оно будет добавляться автоматически с помощью свойства text-overflow . Его понимают все браузеры, включая старые версии IE, и единственным недостатком этого свойства является пока его неясный статус. В CSS3 вроде это свойство входит, но код с ним не проходит валидацию.

В примере 3 показано применение свойства text-overflow со значением ellipsis , которое добавляет многоточие. При наведении курсора мыши на текст, он отображается целиком и подсвечивается фоновым цветом.

Пример 3. Использование text-overflow

HTML5 CSS3 IE Cr Op Sa Fx

Результат данного примера показан на рис. 3.

Рис. 3. Текст с многоточием

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

Есть ли решение добавить эллипсис на последней строке внутри div с высотой жидкости (20%)?

Я нашел функцию -webkit-line-clamp в CSS, но в моем случае номер строки будет зависеть от размера окна.

У меня есть этот JSFiddle, чтобы проиллюстрировать проблему. https://jsfiddle.net/96knodm6/

html css css3 ellipsis

15 ответов

Наконец-то я нашел решение сделать то, что хочу. Как p paragraphe и article обертка. Если вы хотите применить эллипсис к p в зависимости от высоты article (который также зависит от высоты окна), вам нужно получить height article , line-height p , а затем articleHeight/lineHeight , чтобы найти число line-clamp , которое можно добавить динамически тогда.

Единственное, что line-height должно быть объявлено в файле css.

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

58 Michael_B

Если вы хотите применить многоточие (. ) к одной строке текста, CSS делает это несколько проще с text-overflow имущество. Это все еще немного сложно (из-за всех требований – см. Ниже), но text-overflow делает это возможным и надежным.

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

Эллипсис для текста с одной строкой

С text-overflow эллипсис может применяться к одной строке текста. Необходимо выполнить следующие требования CSS:

должен иметь width , max-width или flex-basis
должен иметь white-space: nowrap
должен иметь overflow со значением, отличным от visible
должен быть display: block или inline-block (или функциональный эквивалент, например гибкий элемент).

Итак, это сработает:

НО, попробуйте удалить width или поместив overflow по умолчанию на visible или удалив white-space: nowrap , или используя что-то иное, кроме элемента контейнера блока, AND, эллипсис терпит неудачу.

Один большой вынос здесь: text-overflow: ellipsis не влияет на многострочный текст. (Только требование white-space: nowrap устраняет эту возможность.)

Эллипсис для многострочного текста

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

Пожалуйста, проверьте этот css для многоточия в многострочном тексте

Использование межстрочного интервала в HTML и CSS для выравнивание по вертикали и задания отступов.

Если у вас, к примеру, есть кнопка или блок с заголовком, в котором нужно задать отступы сверху и снизу или выровнять этот текст по центру по вертикали, то тут вы так же можете воспользоваться CSS-свойством line-height.

Ниже приведён пример заголовка без межстрочного интервала и с ним.

XHTML

<h3 style=»line-height:0%;»>Межстрочный интервал равен 0%</h3>
<h3 style=»line-height:300%;»>Межстрочный интервал равен 300%</h3>

1 2	<h3 style=»line-height:0%;»>Межстрочный интервал равен 0%</h3> <h3 style=»line-height:300%;»>Межстрочный интервал равен 300%</h3>

Межстрочный интервал равен 300%

Таким образом, при помощи данного CSS свойства вы можете изменять межстрочный интервал в HTML и CSS коде, и таким образом делать оформление ваших сайтов более привлекательным.

Спасибо что дочитали статью до конца! Если она была для вас полезной, то обязательно поделитесь ею в соцсетях. Так вы поможете мне в продвижении моего проекта.

Желаю вам успехов в оформлении ваших сайтов! До встречи в следующих статьях!

С уважением Юлия Гусарь