Css text overflow color

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

Свойство text-overflow определяет, как будет отображаться пользователю строчный текст, выходящий за границы блока.

text-overflow работает, если свойство overflow установлено в значение «hidden», а white-space имеет значение «nowrap».

В CSS3 спецификация разрешает использование пользовательской строки.

Значение по умолчанию	clip
Применяется	К элементам блочного контейнера.
Наследуется	Нет
Анимируемое	Нет
Версия	CSS3
DOM синтаксис	object.style.textOverflow = «ellipsis»;

Синтаксис

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

Пример

html> html> head> title>Заголовок документа title> style> div < white-space: nowrap; background-color: #eee; width: 50px; overflow: hidden; text-overflow: ellipsis; border: 1px solid #666; > style> head> body> h2>Пример свойства text-overflow h2> h3>text-overflow: ellipsis h3> div>Lorem Ipsum div> body> html>

Пример со значениями «clip», «ellipsis» и «initial»:

Пример

html> html> head> title>Заголовок документа title> style> div.element1 < white-space: nowrap; background-color: #eee; width: 50px; overflow: hidden; text-overflow: clip; border: 1px solid #666; > div.element2 < white-space: nowrap; background-color: #eee; width: 50px; overflow: hidden; text-overflow: ellipsis; border: 1px solid #666; > div.element3 < white-space: nowrap; background-color: #eee; width: 50px; overflow: hidden; text-overflow: initial; border: 1px solid #666; > style> head> body> h2>Пример свойства text-overflow e h2> h3>text-overflow: clip h3> div class="element1">Lorem Ipsum div> h3>text-overflow: ellipsis h3> div class="element2">Lorem Ipsum div> h3>text-overflow: initial h3> div class="element3">Lorem Ipsum div> body> html>

Значения

Значение	Описание
clip	Текст обрезается по размеру области контента. Значение по умолчанию.
ellipsis	Добавляет троеточие («. «), чтобы указать обрезанный текст.
	Указывает пользовательскую строку для отображения обрезанного текста. Пользовательская строка отображается внутри области контента.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.

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

Источник

CSS text-overflow Property

The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (. ), or display a custom string.

Both of the following properties are required for text-overflow:

Default value:	clip
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.textOverflow=»ellipsis» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -o- specify the first version that worked with a prefix.

CSS Syntax

Property Values

Value	Description	Demo
clip	Default value. The text is clipped and not accessible	Demo ❯
ellipsis	Render an ellipsis («. «) to represent the clipped text	Demo ❯
string	Render the given string to represent the clipped text
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

Text-overflow with a hover effect (show entire text on hover):

div.a <
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
>

div.a:hover overflow: visible;
>

Источник

text-overflow

The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis (‘ … ‘), or display a custom string.

Try it

The text-overflow property doesn’t force an overflow to occur. To make text overflow its container, you have to set other CSS properties: overflow and white-space . For example:

overflow: hidden; white-space: nowrap; 

The text-overflow property only affects content that is overflowing a block container element in its inline progression direction (not text overflowing at the bottom of a box, for example).

Syntax

text-overflow: clip; text-overflow: ellipsis ellipsis; text-overflow: ellipsis " [..]"; /* Global values */ text-overflow: inherit; text-overflow: initial; text-overflow: revert; text-overflow: revert-layer; text-overflow: unset; 

The text-overflow property may be specified using one or two values. If one value is given, it specifies overflow behavior for the end of the line (the right end for left-to-right text, the left end for right-to-left text). If two values are given, the first specifies overflow behavior for the left end of the line, and the second specifies it for the right end of the line.

Values

The default for this property. This keyword value will truncate the text at the limit of the content area, therefore the truncation can happen in the middle of a character. To clip at the transition between characters you can specify text-overflow as an empty string, if that is supported in your target browsers: text-overflow: »; .

This keyword value will display an ellipsis ( ‘…’ , U+2026 HORIZONTAL ELLIPSIS ) to represent clipped text. The ellipsis is displayed inside the content area, decreasing the amount of text displayed. If there is not enough space to display the ellipsis, it is clipped.

The to be used to represent clipped text. The string is displayed inside the content area, shortening the size of the displayed text. If there is not enough space to display the string itself, it is clipped.

This keyword clips the overflowing inline content and applies a fade-out effect near the edge of the line box with complete transparency at the edge.

This function clips the overflowing inline content and applies a fade-out effect near the edge of the line box with complete transparency at the edge.

Formal definition

Formal syntax

Источник

CSS change color of text-overflow: ellipsis by hovering it

The following tutorial shows you how to use CSS to do «CSS change color of text-overflow: ellipsis by hovering it».

CSS Style

The CSS style to do «CSS change color of text-overflow: ellipsis by hovering it» is

.gvb-theme-cpCaroToolTipList !-- w w w . d e m o 2 s . c om --> overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:150px; > .gvb-theme-cpCaroToolTipList a < color:#003c72; line-height:30px; padding:5px 10px; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; > .gvb-theme-cpCaroToolTipList a:hover < color:#ffffff; text-align:center; background-color:#003C72; padding:5px 10px; > .gvb-theme-cpCaroToolTipList span:hover < border-bottom:1px dotted #ffffff; text-decoration:none; >

HTML Body

body> div >"gvb-theme-carosuleTooltipMargin"> div >"gvb-theme-cpCaroToolTipList"> a href="#"> img src="img/cp_star.png" >"gvb-theme-cpSetStarIcon"> span>CONTO LA LIBRETTA LIBRETTA     

The following iframe shows the result. You can view the full source code and open it in another tab.

html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> .gvb-theme-cpCaroToolTipList !-- w w w . d e mo 2 s. c o m --> overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 150px; /* color:#ffffff;*/ > .gvb-theme-cpCaroToolTipList a < color: #003c72; line-height: 30px; padding: 5px 10px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; > .gvb-theme-cpCaroToolTipList a:hover < color:#ffffff; text-align:center; background-color:#003C72; padding:5px 10px; > .gvb-theme-cpCaroToolTipList span:hover < border-bottom: 1px dotted #ffffff; text-decoration: none; >  body> div >"gvb-theme-carosuleTooltipMargin"> div >"gvb-theme-cpCaroToolTipList"> a href="#"> img src="img/cp_star.png" >"gvb-theme-cpSetStarIcon" > span>CONTO LA LIBRETTA LIBRETTA      

Related

• CSS change a portion of text on hover with css
• CSS change color of specific text in table row on hover
• CSS change color of specific text in table row on hover (Demo 2)
• CSS change color of text-overflow: ellipsis by hovering it
• CSS change color of text-overflow: ellipsis by hovering it (Demo 2)
• CSS change html text to logo on hover
• CSS Change Text Box Content On Hover

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник

text-overflow¶

Свойство text-overflow определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область.

Возможны два варианта: текст обрезается; текст обрезается и к концу строки добавляется многоточие. text-overflow работает в том случае, если для блока значение свойства overflow установлено как auto , scroll или hidden .

Демо¶

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

/* Overflow behavior at line end Right end if ltr, left end if rtl */ text-overflow: clip; text-overflow: ellipsis; text-overflow: '…'; text-overflow: fade; text-overflow: fade(10px); text-overflow: fade(5%); /* Overflow behavior at left end | at right end Directionality has no influence */ text-overflow: clip ellipsis; text-overflow: '…' '…'; text-overflow: fade clip; text-overflow: fade(10px) fade(10px); text-overflow: fade(5%) fade(5%); /* Global values */ text-overflow: inherit; text-overflow: initial; text-overflow: unset; 

Значения¶

clip Текст обрезается по размеру области. ellipsis Текст обрезается и к концу строки добавляется многоточие.

Значение по-умолчанию: clip

Применяется к блочным элементам

Спецификации¶

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

 html> head> meta charset="utf-8" /> title>text-overflowtitle> style> p.clip  white-space: nowrap; /* Запрещаем перенос строк */ overflow: hidden; /* Обрезаем все, что не помещается в область */ background: #fc0; /* Цвет фона */ padding: 5px; /* Поля вокруг текста */ text-overflow: ellipsis; /* Добавляем многоточие */ > style> head> body> p class="clip"> Магнитное поле ничтожно гасит большой круг небесной сферы, в таком случае эксцентриситеты и наклоны орбит возрастают. p> body> html> 

Источник