Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Шрифт и текст : text-overflow
смотрим также
-
По материалам: #.
Материал из Справочник Web-языков
Содержание |
Атрибут -ms-text-overflow | Свойство textOverflow
Дает возможность показывать многоточие (...) вместо части текста, которая не умещается в строку.
Синтаксис
HTML | { -ms-text-overflow : iTextOverflow } |
Скрипты | [ iTextOverflow = ] object.style.textOverflow [ = v ] |
Используемые значения
- iTextOverflow
- Строка, которая принимает значение, указывающее, где надо отобразить многоточие вместо контента, который не помещается в указанную для него область.
- ellipsis
- Показывает многоточие (...) вместо непоместившегося текста.
- clip
- Значение по умолчанию. При выходе за границы, контент просто обрезается, многоточие не показывается.
Это свойство читается/записывается для всех объектов, кроме currentStyle (только чтение). Значением по умолчанию является clip. Атрибут Каскадных таблиц стилей (CSS) не наследуется.
Замечания
Атрибут -ms-text-overflow для Internet Explorer 8 - это расширение CSS и может использоваться также как text-overflow в режиме IE8.
textOverflow было внедрено в Microsoft Internet Explorer 6.
Свойство textOverflow применяется только к тексту, который не умещается в заданную область по горизонтали (левая и правая границы) из-за малой ширины этой области. Чтобы при переполнении произошел показ многоточия, программист должен задать значение nowrap для свойства whiteSpace или заключить контент в тэг nobr. Если нет возможности перенести строку (например, ее ширина и так имеет минимальный размер, или если длинное слово не может быть принудительно "разорвано"), тогда overflow может применяться и без nowrap.
Для этого свойства элемента должно быть задано значение, отличное от значения по умолчанию (visible), чтобы отображалось многоточие для текста. Лучше всего задать для overflow значение hidden. Значения scroll и auto также допустимы, но при этом будут показываться полосы прокрутки.
Скрытый текст можно посмотреть, если выделить многоточие. Когда оно будет выделено, то сразу же исчезнет и будет заменено на текст, который до этого выходил за границы области.
Свойство textOverflow является хорошей альтернативой построению конструкций для многоточия в Dynamic HTML (DHTML). Так как прием с показом многоточия вместо текста может использоваться несколько раз в пределах 1 страницы, то использование свойства textOverflow повышает скорость загрузки страниц.
Примеры
В примере показывается как использовать оба значения для свойства textOverflow: и ellipsis, и clip. Также демонстрируется как эффект от свойства textOverflow может быть отменен, если установить overflow значение visible.
HTML> <BODY> <DIV STYLE="text-decoration:underline;color:darkRed; font: bold 20px Arial;font-weight:bold"> Effect of CSS property <I>text-overflow</I></DIV> <DIV STYLE="font: bold 16px Arial; color:darkRed; font-weight:bold"> Каждый объект (элемент DIV), располагающийся ниже, содержит следующий текст:</DIV> <DIV >Здесь располагается длинный текст, с которым будут производиться действия.</DIV> <DIV STYLE="font: bold 16px Arial;color:darkRed; font-weight:bold"> Посмотрите, как применяются настройки стилей при отображении текста.</DIV> <DIV STYLE="position: relative; height: 75px; top:10"> <DIV STYLE="position: absolute; left: 10px; font: bold 16px Arial, sans-serif; color: blue; "> STYLE ="text-overflow : clip; overflow : hidden" <DIV STYLE="position: absolute; left: 0px; top: 18px; color: black; width: 120px; height: 50px; border: 1px solid blue; font: 14px Times New Roman, serif; overflow: hidden; text-overflow:clip"> <NOBR>Здесь располагается длинный текст, с которым будут производиться действия.</NOBR> </DIV> </DIV> <DIV STYLE="position: relative; height: 75px; top: 70"> <DIV STYLE="position: absolute; left: 10px; font: bold 16px Arial, sans-serif; color: blue; "> STYLE ="text-overflow : ellipsis; overflow : hidden" <DIV STYLE="position: absolute; left: 0px; top: 18px; color: black; width: 120px; height: 50px; border: 1px solid blue; font: 14px Times New Roman, serif; overflow: hidden; text-overflow:ellipsis"> <NOBR>Здесь располагается длинный текст, с которым будут производиться действия.</NOBR> </DIV> </DIV> <DIV STYLE="position: relative; height: 75px; top:70"> <DIV STYLE="position: absolute; left: 10px; font: bold 16px Arial, sans-serif; color: blue; "> STYLE ="text-overflow : ellipsis; overflow : visible" <DIV STYLE="position: absolute; left: 0px; top: 18px; color: black; width: 120px; height: 50px; border: 1px solid blue; font: 14px Times New Roman, serif; overflow: visible; text-overflow:ellipsis"> <NOBR>Здесь располагается длинный текст, с которым будут производиться действия.</NOBR> </DIV> </DIV> </BODY> </HTML>
Стандарты
Это свойство описано в Дополнении к Cascading Style Sheets (CSS)
Ссылки на источники
https://msdn.microsoft.com/en-us/library/ms531174(VS.85).aspx