Справочник по 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

Добавить страницу в закладки:
РАЗРЕШАЕТСЯ перепечатывать и копировать информацию ТОЛЬКО ПРИ РАЗМЕЩЕНИИ ссылки на оригинал!
(<A href="https://www.spravkaweb.ru/">Справочник Web-языков</A>)
другие проекты
Rambler\'s Top100 Индекс цитирования