Css троеточие: text-overflow | htmlbook.ru — Вебджем.рф | Создание и продвижение сайтов

Содержание

overflow ellipsis и ограничение по высоте или dotdotdot на css

HTML:

<div>
    <p>Длинный текст, выходящий за все разумное, ну могут менеджеры навводить, ну 
       ни как без этого, пытаются впишнуть не впихуемое, а мы беремени потом голову, 
       что бы все красиво было и не разьехалось, вот такая судьба брат
    </p>
</div>

CSS:

div {
  width: 200px;
  height: 100px;
  border: 1px solid gray;
  border-radius: 6px;
  padding: 10px;
}
p {
  position: relative;
  height: 70px;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
  overflow: hidden;
}
P:after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
}

Поиграться можно jsfiddle

Нужно что-бы троеточие шло сразу после текста !!

Всю голову сделал, пока не вышло
…чую и ни как, но надежда остается

Есть, конечно, плагин dotdotdot на js, он отрабатывает на ура
Но там денег просят, если официально юзать, насколько я понял

Да и не хочется столько кода тащить из-за парочки мест

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1. 0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <p>Длинный текст, выходящий  за все разумное, ну могут менеджеры навводить, ну 
           ни как без этого, пытаются впишнуть не впихуемое, а мы беремени потом голову, 
           что бы все красиво было и не разьехалось, вот такая судьба брат что бы все красиво было и не разьехалось, вот такая судьба брат
        </p>
    </div>

    <style>
        .module {
            width: 350px;
            margin: 0 0 1em 0;
            overflow: hidden;
          }
          .module p {
            margin: 0;
          }
          
          .line-clamp {
            display: -webkit-box;
            -webkit-line-clamp: 5; /* номер строки где указывается троеточие */
            -webkit-box-orient: vertical;  
          }
    </style>
</body>
</html>

Но это только для вебкитовских браузеров

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

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

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

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

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

Почта

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

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

Почта

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

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

Свойство text-overflow | CSS справочник

CSS свойства

Определение и применение

CSS свойство text-overflow указывает, что должно произойти, когда текст переполняет, содержащий элемент.

Применение свойства рассматривается в тех ситуациях, когда текст обрезается, либо когда он переполняет содержимое элемента, в этих случаях текст можно обрезать, поставить троеточие (‘…’, Юникод — U+2026), или отобразить определенную пользовательскую строку(в настоящее время поддерживается только в Firefox). Т.е. text-overflow происходит, когда свойство overflow имеет значения hidden, scroll или auto и свойство white-space имеет значение nowrap (перенос слов запрещён).

Свойство text-overflow применяется только к блочным, либо блочно-строчным элементам, поскольку элемент должен иметь заданную ширину, кроме того переполнение происходит в зависимости от направления текста заданного свойством direction, либо глобальным HTML атрибутом dir.

Поддержка браузерами

Значение	Chrome	Firefox	Opera	Safari	IExplorer	Edge
clip \| ellipsis	4.0	7. 0	11.0 9.0 -o-	3.1	6.0	12.0
string (пользовательская строка)	Нет	9.0	Нет	Нет	Нет	Нет
2 value (обе стороны)	Нет	9.0	Нет	Нет	Нет	Нет

CSS синтаксис:

text-overflow:"clip | ellipsis | string | initial | inherit";
Значение string(пользовательская строка) поддерживается только в Firefox.
text-overflow:"///";
text-overflow:"..";
text-overflow:"☺☺☺"; и т.п.
Два значения для свойства (начало/конец элемента) поддерживается только в Firefox.
text-overflow:"☺☺☺" "☺☺☺";
text-overflow:clip ellipsis; и т.п.

JavaScript синтаксис:

object.style.textOverflow = "clip"

Значения свойства

Значение	Описание
clip	Текст обрезается по размеру области содержимого. Это значение по умолчанию.
ellipsis	Добавляет троеточие (‘. ..’, Юникод — U+2026), которое обозначает, что текст был обрезан. Троеточие (горизонтальное многоточие/эллипсис) отображается внутри области содержимого, уменьшая при этом размер отображаемого текста. Если необходимое место для отображения троеточия отсутствует, то оно обрезается.
string	Указывает пользовательскую строку для отображения обрезанного текста. В настоящее время поддерживается только в Firefox.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

  
<!DOCTYPE html>
<html>
<head>
<title>>Переполнение текстом элемента в CSS</title>
<style> 
div {
width : 250px; /* задаём ширину блока */
border : 1px solid blue; /* задаём сплошную границу шириной 1px синего цвета */
background : azure; /* задаём цвет заднего фона  */
margin : 5px; /* указываем внешний отступ для всех сторон */
overflow : hidden; /* указываем, что при переполнении скрывать содержимое */
white-space : nowrap; /* перенос на новую строку не производится */
}
. test {
text-overflow:clip; /* текст обрезается по размеру области содержимого. */
}
.test2 {
text-overflow:ellipsis; /* добавляет троеточие, которое обозначает, что текст был обрезан */
}
.test3 {
text-overflow:"☺☺☺"; /* добавляет "пользовательскую строку"(пользовательское значение), которое обозначает, что текст был обрезан */
}
 .test4 {
text-overflow:"☺☺☺" "☺☺☺"; /* добавляет "пользовательскую строку"(пользовательское значение), которое обозначает, что текст был обрезан как в начале, так и конце элемента */
text-indent : -10px; /* задаем отрицательную красную строку */
}
</style>
</head>
	<body>
		<div class = "test">съешь же ещё этих мягких французских булок, да выпей чаю</div>
		<div class = "test2">съешь же ещё этих мягких французских булок, да выпей чаю</div>
		<div class = "test3">съешь же ещё этих мягких французских булок, да выпей чаю</div>
		<div class = "test4">съешь же ещё этих мягких французских булок, да выпей чаю</div>
	</body>
</html>

Пример использования свойства text-overflow(переполнение текстом элемента в CSS).

CSS свойства

Свойство CSS text-overflow

❮ Назад Полное руководство по CSS Далее ❯

Пример

Использование свойства text-overflow:

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

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Свойство text-overflow указывает, как переполненное содержимое, которое не отображаемое должно быть сообщено пользователю. Его можно обрезать, отображать многоточие (…) или отобразить пользовательскую строку.

Для переполнения текста необходимы оба следующих свойства:

пробел: nowrap;
переполнение: скрыто;

Показать демо ❯

Значение по умолчанию:	зажим
Унаследовано:	нет
Анимация:	№. Читать про анимированный
Версия:	CSS3
Синтаксис JavaScript:	объект .style.textOverflow=»многоточие» Попытайся

Поддержка браузера

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

Цифры, за которыми следует -o-, указывают первую версию, которая работала с префиксом.

Недвижимость
переполнение текста	4,0	6,0	7,0	3.1	11,0 9,0 -о-

Синтаксис CSS

text-overflow: clip|ellipsis| строка |начальный|наследовать;

Значения свойств

Значение	Описание	Демо
зажим	Значение по умолчанию. Текст обрезан и недоступен	Демонстрация ❯
многоточие	Визуализация многоточия («…») для представления обрезанного текста	Демонстрация ❯
строка	Визуализация данной строки для представления обрезанного текста
начальный	Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать	Наследует это свойство от родительского элемента. Читать о унаследовать

Другие примеры

Пример

Переполнение текста с эффектом наведения (показывать весь текст при наведении):

div.a {
  пробел: nowrap;
  переполнение: скрыто;
  текстовое переполнение: многоточие;
}

div.a:hover {
переполнение: видимое;
}

Попробуйте сами »

Связанные страницы

Учебное пособие по CSS: Текстовые эффекты CSS

Справочник по HTML DOM: свойство textOverflow

❮ Предыдущий Полное руководство по CSS Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.

CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

Основные ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top4 Examples Примеры HTML

Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

html — переполнение текста CSS: перенос многоточия на вложенную структуру div

спросил 1 год, 1 месяц назад

Изменено 1 год, 1 месяц назад

Просмотрено 1к раз

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

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

влево1~вправо1 влево2~вправо2…

я бы предпочел

влево1~вправо1 влево2~вправо2 влево3~rig…

Чтобы увидеть этот эффект, вам, возможно, придется настроить значение max -ширина.

 html, тело {
  ширина: 100%;
}
.внешний {
  цвет фона: лаванда;
  отображение: встроенный блок;
  максимальная ширина: 30%;
  переполнение: скрыто;
  переполнение текста: многоточие;
  пробел: nowrap;
}
.внутренний {
  отображение: встроенный блок;
}
.внутренний>* {
  дисплей: встроенный;
}
.inner>:first-child::after {
  содержание: "~"
}

 
  <тело>
    <дел>
      <дел>
        слева1
        справа1

Css троеточие: text-overflow | htmlbook.ru

overflow ellipsis и ограничение по высоте или dotdotdot на css

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

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

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

Свойство text-overflow | CSS справочник

Определение и применение

Поддержка браузерами

Значения свойства

Версия CSS

Наследуется

Анимируемое

Пример использования

Свойство CSS text-overflow

Пример

Определение и использование

Поддержка браузера

Синтаксис CSS

Значения свойств

Другие примеры

Пример

Связанные страницы

ВЫБОР ЦВЕТА

Лучшие учебники

Основные ссылки

Top4 Examples Примеры HTML

html — переполнение текста CSS: перенос многоточия на вложенную структуру div

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

Рубрики