| Kosten | Воскресенье, 01 Июля 2018, 04:28 | Сообщение 1 |
| Возможно, вы видели крупные сайты с усеченным текстом на боковой панели, чтобы держать вещи плотно и аккуратно организованы. Если вы задавались вопросом, используют ли они JavaScript или какой-либо другой сложный метод для достижения этого, здесь отрицательный ответ будет. Хотя это может показаться довольно сложным, на самом деле его очень просто добиться, используя только CSS. В этом уроке мы научим вас, как легко отрегулировать текстовые строки при добавлении эллипсиса в конце с помощью CSS.
Теперь, когда отзывчивый дизайн является неотъемлемой частью веб-разработки, часто возникают определенные проблемы. На мобильных устройствах очень распространенным явлением является то, что текстовые строки слишком длинны для размещения внутри элемента контейнера, тем самым переполняя его.
Хотя существует много разных ситуаций, когда эта проблема может случиться, мы часто видим ее при отображении URL-адресов, потому что они обычно являются более длинными текстовыми строками, которые не содержат естественных разрывов. К счастью, эту проблему очень легко исправить, просто используя свойство word-break В этом уроке мы научим вас, как легко перебивать переполняющие текстовые строки с помощью свойства word-break.
Шаг 1: Создайте HTML элемент для вашего усеченного текста.
На шаге 1 мы создадим элемент HTML, чтобы поместить текст, который мы хотим усечь внутри. Для целей данного руководства мы будем использовать тег span. Обратите внимание, что вы можете использовать любой HTML, который вы хотите для этого метода.
HTML
Код <span class="gaturkadia_dkopan">Google может готовиться к использованию Sony, Microsoft в консольных войнах</span>
Элементы для заметок:
1. Обратите внимание на добавленный элемент HTML CSS «truncate» к элементу HTML, на который он будет ссылаться на следующем и последнем шаге.
2. Можно использовать любой элемент.
Шаг 2: используйте CSS, чтобы урезать текст, а также добавить Ellipsis в конце
На последнем этапе мы будем использовать CSS, чтобы сделать наш тег span отзывчивым, в то же время обрезая текст с эллипсисом в конце его.
CSS
Код .gaturkadia_dkopan{
display: block;
max-width: 315px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Элементы для заметок:
1. Убедитесь, что вы ссылаетесь на один и тот же класс CSS, помещенный в ваш HTML элемент.
2. Максимальная ширина может быть отрегулирована до любой необходимой или удаленной ширины, если элемент уже находится внутри другого реагирующего элемента.
3. Белый пробел, установленный на nowrap и переполнение, гарантирует, что ваш текст останется на одной строке.
4. Переполнение текста, установленное на эллипсис, который отображает в конце вашей усеченной текстовой строки.
Если вы все еще не можете заставить его работать, пожалуйста, оставьте нам комментарий ниже, и мы ответим как можно скорее. Пожалуйста, не отправляйте нам по электронной почте проблемы с этим учебным курсом, на которые будут отвечать только комментарии.
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Воскресенье, 01 Июля 2018, 04:49 | Сообщение 2 |
|
| Здесь аналогично сокращаем длинный текст, только по другому варианту, а точнее все корректнее, где не будет точек. Просто задаем ширину блока, но главная, это высота, так чтоб низ подвести под строку знаков, все увидите на Demo странице. Что по мне, такой метод может пригодится на разных элементов, до вывода комментарий или на информер, вообщем где выводятся знаки.
Приступаем к установке:
HTML
Код <div class="zaretulopsa">
Здесь ваше большое описание
</div>
CSS
Код .zaretulopsa{
margin: 0 auto;
width: 319px;
max-height: 217px;
overflow: hidden;
text-overflow: ellipsis;
}
Ширину и высоту выставляем сами, это все по ситуаций, что происходит при установки.
Демонстрация
| | Страна: (RU) |
| |
