Text overflow: text-overflow — CSS: Cascading Style Sheets

Leave a Comment / Разное / By /

CSS text overflow

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Полный CSS Справочник Дальше ❯


Пример

Использование свойства переполнения текста:

div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Подробнее примеры ниже.

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

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

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

  • white-space: nowrap;
  • overflow: hidden;

Значение по умолчанию:clip
Inherited:no
Animatable:no. Читайте о animatable
Version:CSS3
Синтаксис JavaScript: object
. style.textOverflow=»ellipsis»

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

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

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

Свойство
text-overflow4.06.07.03.111.0
9.0 -o-

Синтаксис CSS

text-overflow: clip|ellipsis|string|initial|inherit;

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

ЗначениеОписание
clipЗначение по умолчанию. Текст обрезан и недоступен
ellipsisВизуализация эллипса («…») для представления обрезанного текста
stringВизуализация заданной строки для представления обрезанного текста
initialПрисваивает этому свойству значение по умолчанию.
(Читайте о initial)
inheritНаследует это свойство из родительского элемента. (Читайте о inherit)

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

Пример

Text-переполнение с эффектом наведения (отображение всего текста при наведении):

div.a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.a:hover {
    overflow: visible;
}

Похожие страницы

CSS Справочник: CSS Text Effects

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

❮ Назад Полный CSS Справочник Дальше ❯

Популярное CSS

css текст
блоки css
css картинки
как сделать css
цвета css
шрифты css
css стили
елементы css
фон css

кнопки css
таблица css
размер css
ссылки css
изображение css
выравнивание css
внешние отступы css
внутренние отступы css
списки css
css ширина
css при наведении
css формы

Copyright 2018-2020 HTML5CSS. ru

Правила и Условия Политика конфиденциальности О нас Контакты

css властивість text-overflow

  • Головна
  • css
  • властивості
  • text-overflow

Властивість text-overflow задає спосіб обрізання тексту, що не помістився в середині елемента.

Ви можете вказати, що для позначення будь-якого прихованого тексту використовується ellipsis «…» або якийсь інший символ.

Якщо в блоку є властивість overflow зі значенням hidden, будь-який текст, який є занадто великим, щоб вміститися у блоці, буде відрізаний. Те ж саме стосується

auto або scroll, хоча в таких випадках користувач має можливість прокрутки. У будь-якому випадку, залежно від того, де текст був перерваний користувач може або не може бути бачити його (ту частинку, яка не вмістилася). Ви можете використовувати text-overflow, щоб надати візуальну підказку користувачеві про те, що є більше вмісту, наприклад, символ «. ..».

Властивість text-overflow впливає тільки на вміст. У цьому випадку його можна використовувати з overflow-x, але не з overflow-y.

У багатьох випадках текст просто перенесеться на наступний рядок. Властивість text-overflow впливає тільки на вміст, який не може бути обрізаний (наприклад, через надто довге слово або коли властивість white-space встановлена на nowrap

).

Нотатка:

Ця властивість працює лише тоді, коли для блоку встановлено властивость overflow як auto чи hidden.

Запропонувати свою пораду чи нотатку

ПорадаНотатка

Синтакс

text-overflow: clip|ellipsis|string|initial|inherit;

Властивість text-overflow може отримувати 5 значень:

clip

Зайвий текст буде обрізано.

ellipsis

Зайвий текст буде обрізано, а до кінця рядка додано три крапки.

string

Текст, що має побачити користувач, замість обрізаного тексту. Наприклад: «Щоб прочитати це, увійдіть в розділ».

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивості від свого батьківського елемента.

Значення без задання:clip
Наслідує:Ні
Анімується:Ні
JavaScript синтаксис:object.style.textOverflow=»ellipsis»

Переглядачі

  • Стаціонарні переглядачі
  • Мобільні переглядачі
Переглядач
text-overflow

1.

0

6.0

7.0

1.3

11.0
9.0 -o-

Переглядач
text-overflow

1.5

7.0

1.3

Приклади

  • Приклад 1
  • Приклад 2
  • Приклад 3

Значення у дії

Використання властивості text-overflow
Синтаксис влативості
div { 


  text-overflow: ellipsis; 


} 
  
Додаткові посилання
box-sizing
content
cursor
outline-color
resize
outline
nav-down
nav-index
nav-left
nav-right
nav-up
outline-offset
outline-style
outline-width
 html — Как предотвратить переполнение текста в CSS? 
 спросил 
 Изменено
 11 месяцев назад
 Просмотрено
 405 тысяч раз
 Как предотвратить переполнение текста в блоке div в CSS?
 раздел {
  ширина: 150 пикселей;
  /* что сюда поставить? */
} 
 
Этот div содержит VeryLongWordWhichDoesNotFitToTheBorder. 
 
  •  html
  •  css
  •  переполнение
 2
 Если вы хотите, чтобы выходящий за пределы текст в div автоматически переходил на новую строку вместо того, чтобы быть скрытым или создавать полосу прокрутки, используйте свойство
  word-wrap: break-word 
 
.
 4
 Вы можете попробовать:
 

    вещи


#мойDiv {
    переполнение: скрыто;
}
 
 Дополнительные сведения см. в документации по свойству переполнения.
 1
 Просто используйте:
 word-wrap: break-word;
пробел: предварительная обертка;
слово-разрыв: слово-разрыв;
 
 1. 
 word-wrap 
 Позволяет переносу длинных слов на следующую строку.
  Возможные значения: 
  •   нормальный  : Слова разрыва только в разрешенных точках разрыва
  •   break-word  : Позволяет разбивать неразрывные слова
 раздел {
    ширина: 150 пикселей;
    граница: 2px сплошная #ff0000;
}
div. normal {
    перенос слов: обычный;
}
div.break {
    перенос слов: прерывание слова;
} 
  
  
перенос слов: нормальный
 

 Этот div содержит VeryLongWordWhichDoesNotFitToTheBorder.

 
word-wrap: break-word
 

 Этот div содержит VeryLongWordWhichDoesNotFitToTheBorder.
 
 2. 
 white-space 
 Указывает, как обрабатывается пробел внутри элемента.
  Возможные значения: 
  •   nowrap  : Текст никогда не будет переноситься на следующую строку.
  •   pre-wrap  : Браузер сохраняет пробелы. Текст будет переноситься при необходимости, а на разрывах строк
 раздел {
    ширина: 150 пикселей;
    граница: 2px сплошная #ff0000;
}
div.nowrap {
    пробел: nowrap;
}
div.pre-обертка {
    пробел: предварительная обертка;
} 
  
white-space: nowrap
 

Этот div содержит очень длинный, но нормальный абзац с таким количеством слов и ничего больше. 

 
пробел: предварительная обертка
 

Этот элемент div содержит очень длинный, но нормальный абзац с таким количеством слов и ничем другим.
 
 
 3. 
 word-break 
 Указывает, как должны прерываться слова при достижении конца строки.
  Возможные значения: 
  •   обычный  : правила разрыва строки по умолчанию.
  •   break-word  : Во избежание переполнения слово может быть разбито в произвольных точках.
 раздел {
  ширина: 150 пикселей;
  граница: 2px сплошная #ff0000;
}
div.normal {
  разрыв слова: обычный;
}
div.break-слово {
  слово-разрыв: слово-разрыв;
} 
  
разрыв слова: нормальный (по умолчанию)
 

 Этот div содержит VeryLongWordWhichDoesNotFitToTheBorder.

 
разрыв слова: разрыв слова
 

 Этот div содержит VeryLongWordWhichDoesNotFitToTheBorder.
 
 Для версий  white-space  для конкретных браузеров используйте:
 white-space: pre-wrap; /* CSS3 */
пробел: -moz-pre-wrap; /* Fire Fox */
пробел: -предварительная обертка; /* Опера <7 */
пробел: -o-pre-wrap; /* Опера 7 */
 
 2
 Вы можете использовать свойство CSS text-overflow для обрезания длинных текстов.
 <дел>
  Здравствуй вселенная!
#Привет { ширина: 100 пикселей; пробел: nowrap; переполнение: скрыто; переполнение текста: многоточие; // Здесь происходит волшебство }

ссылка: http://makandracards.com/makandra/5883-use-css-text-overflow-to-truncate-long-texts

0

Вы можете управлять им с помощью CSS, есть несколько опций:

  • hidden -> Весь выходящий за пределы текст будет скрыт.
  • visible -> Пусть текст переполняется видимым.
  • прокрутка -> поставить полосы прокрутки, если текст выходит за пределы

Надеюсь, это поможет.

0

есть еще одно свойство css:

 пробел: нормальный;

Свойство пробела управляет тем, как обрабатывается текст в элементе, к которому оно применяется.

 раздел {
  /* Это значение по умолчанию, вам не нужно
     явно объявить его, если не переопределить
     другое объявление */
  пробел: обычный;
}

1

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

 . ellipsis {
  переполнение текста: многоточие;
  /* Требуется, чтобы text-overflow делал что-либо */
  пробел: nowrap;
  переполнение: скрыто;
}

Более подробно объяснено по этой ссылке http://css-tricks.com/almanac/properties/t/text-overflow/

0

Я думаю, вам следует начать с основ w3

https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

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

1

Теперь свойство css:

слово-разрыв: разбить все

0

переполнение: прокрутка ? Или авто. в атрибуте стиля.

 .Непереполнение {
    ширина: 200 пикселей; /* Нужна ширина, чтобы это работало */
    переполнение: скрыто;
}
 
 <дел>
    Длинный текст

1

Если ваш div имеет заданную высоту в css, это приведет к его переполнению за пределы div.

Вы можете указать минимальную высоту div, если вам нужно, чтобы она всегда была минимальной высотой div.

Минимальная высота не будет работать в IE6, но если у вас есть специальная таблица стилей для IE6, вы можете задать для нее обычную высоту для IE6. Высота изменяется в IE6 в соответствии с содержимым внутри.

Вы можете просто установить минимальную ширину в CSS, например:

 .someClass{min-width: 980px;}

Он не сломается, тем не менее вам все равно придется иметь дело с полосой прокрутки.

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

1) set style="height:auto;" для всех элементов

и повторите попытку.

2) Установите style="border: 3px сплошной красный цвет;" на всех элементах

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

3) Убираем все css height:#px; свойств из вашего CSS и начните сначала.

Например:

 
I
    
А
        <дел>1А
        

        <дел>2А
<дел>Б <дел>1B
<дел>2B