Как обрезать строку с добавлением троеточия

"Обрезать строку cs" и ли "Как обрезать строку с добавлением троеточия". Обрежем строчку с добавлением точек после обрезанной строки!

Подробно о добавлении троеточия после обрезанной строки!

1. Пример/код css/html для обрезки строки и троеточия
2. Живой пример/кода css/html для обрезки строки и троеточия
3. Будет ли индексироваться обрезанный текст с троеточием?

Пример/код css/html для обрезки строки и троеточия

Вы знали, что по английски троеточие будет:

ellipsis

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

Какой-то элемент - пусть это будет div,с произвольным классом = "blackblock" ...

И поместим внутрь блока текст, который явно будет выходить за пределы блока:

<div class="blackblock">Здесь текст, который будет явно выходить за пределы блока, и его надо будет обрезать и поставить после обрезанной строки троеточие!</div>

Как вы наверное знаете у css есть "3 способа css", воспользуемся одним из них и добавим стили нашему классу

<style>

.blackblock {

padding: 24px !important;

background: black;

color: #fbff00;

font-size: 25px;

text-align: center;

display: block;

margin: 10px 0;

}

</style>

Смотрим результат:

Здесь текст, который будет явно выходить за пределы блока, и его надо будет обрезать и поставить после обрезанной строки троеточие!

Мы получили пример текста в блоке, который нам нужно обрезать и поставить троеточие после обрезанной строки!




Живой пример/кода css/html для обрезки строки и троеточия

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

Берем выше приведенный пример:

Здесь текст, который будет явно выходить за пределы блока, и его надо будет обрезать и поставить после обрезанной строки троеточие!

Мы получили пример текста в блоке, который нам нужно обрезать и поставить троеточие после обрезанной строки!

И добавим ему код css, который и поставит троеточие и отрежет лишнюю строку, добавляем:

overflow: hidden; - обрезаем лишнюю часть строки.

Еще :

white-space: nowrap;- Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой.

+

text-overflow: ellipsis; - Текст обрезается и к концу строки добавляется многоточие.

Соберем весь код:

Код css/html для обрезки строки и троеточия

<div class="blackblock" style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">Здесь текст, который будет явно выходить за пределы блока, и его надо будет обрезать и поставить после обрезанной строки троеточие!</div>

Пример css/html обрезанной строки и троеточия

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

Здесь текст, который будет явно выходить за пределы блока, и его надо будет обрезать и поставить после обрезанной строки троеточие!



Будет ли индексироваться обрезанный текст с троеточием?

Встретил интересный вопрос "Будет ли индексироваться обрезанный текст с троеточием?".

С моей точки зрения очень странный вопрос - того, что человек не понимает механизма обрезки строки и установки троеточия в конце!

Данная операция - визуальная

Выше приведенный стили, которые обрезали строку с добавление троеточия - это визуальные эффекты, которые никак не скажутся на том тексте, который вы обрезали с троеточием!

Для этого достаточно открыть исследовать элемент и посмотреть на ваш текст:

Как видим... с вашим текстом ничего не случилось... значит он должен проиндексироваться!

Нажмите, чтобы открыть в новом окне.