Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/css/properties/text-overflow-mode below:

text-overflow-mode · WebPlatform Docs

The text-overflow-mode CSS property controls the presence and position of the hint on overflowed content that is not displayed is signaled to the users. The constitution of the hint is controlled with CSS property text-overflow-ellipsis. Shorthand property is text-overflow.

Initial value

clip

Applies to

block-level and inline-block elements

Inherited

No

Media

visual

Computed value

specified value (except for initial and inherit)

Animatable

No

CSS Object Model Property

text-overflow-mode

• text-overflow-mode: clip
• text-overflow-mode: ellipsis
• text-overflow-mode: ellipsis-word

clip

Default. Simply clips the content and does not display ellipsis for text-overflow.

ellipsis

Display ellipsis (…) for text overflow after the last letter that entirely fits into a line.

ellipsis-word

Display ellipsis (…) for text overflow after the last word that entirely fits into a line.

<div class="overflowed overflowed-clip">
    <p>This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</p>
</div>
<div class="overflowed overflowed-ellipsis">
    <p>This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</p>
</div>
<div class="overflowed overflowed-ellipsis-word">
    <p>This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</p>
</div>

View live example

.overflowed > p{
    width: 10em;
    height: 5em;
    white-space: nowrap;
    overflow: hidden;
}

.overflowed-clip {
    text-overflow-mode: clip;
}

.overflowed-ellipsis > p {
    text-overflow-mode: ellipsis;
}

.overflowed-ellipsis-word > p {
    text-overflow-mode: ellipsis-word;
}

View live example

This property only applies to text overflow in the inline direction (horizontal, in normal Western text). Inline overflow occurs when the text in a line overflows the available width without a breaking opportunity. To force overflow to occur and ellipses to be applied, the author must apply the nowrap value to the white-space property on the element, or wrap the content in a <NOBR> tag. If there is no breaking opportunity (for example, the width is narrow or there is a long word that does not break well), then overflow may occur without nowrap being applied. This property on the element must be set to something other than visible, the default, in order for ellipsis to be rendered. The best choice is to set overflow to hidden. Setting overflow to scroll or auto will also work, but will show scrollbars. The hidden text can be selected by selecting the ellipses. When selected, the ellipses will disappear and be replaced by the text to the extent of the layout area. This property offers an efficient alternative to building ellipses in Dynamic HTML (DHTML). As ellipses may be rendered many times on a single page, using this property can significantly speed up performance.

• background-blend-mode

• background-position

• break-before

• height

• list-style

• list-style-position

• text-overflow-ellipsis

• text-overflow-mode

• text-rendering

• user-select

• equality

• Attribute selector

• hyphen

• prefix

• substring

• suffix

• baseline-shift

• JavaScript animation

• block-progression

• font-language-override

• font-size

• hyphenate-limit-chars

• hyphenate-limit-lines

• hyphenate-limit-zone

• hyphens

• ime-mode

• layout-grid

• layout-grid-char

• layout-grid-line

• layout-grid-mode

• layout-grid-type

• letter-spacing

• text-overflow-ellipsis

• text-overflow-mode

• text-rendering

• user-modify

• Text

• size

• b

• b

• br

• br

• caption

• cite

• code

• del

• dfn

• em

• font

• hr

• i

• ins

• kbd

• mark

• samp

• strong

• Achieving typographic effects with the canvas tag

/css/properties/text-overflow

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4