Coding for Beginners: CSS Basics #78— How to Handle Text Overflow

------

Text-overflow is used to tell users that more content exists that cannot be displayed because of limitations by the containing element.

The content can be clipped, an ellipsis can be added, or a "custom string" can be added.

Text-overflow does not control the overflow of the text limited by its container, it just signals to the user that more content exists. You would still use the overflow property for that.

Text-overflow accepts the following values: clip, ellipsis, a custom string, or fade. The property can accept two values to specify the overflow behavior for the left end of a line while the second value affects the right end of a line.

Clip is considered the default. The text will simply be truncated. If you add an empty string and the browser supports this function, the truncation will happen at a transition between characters rather than in the middle of a character.

Ellipsis adds an ellipsis to represent the clipped text.

Some browsers recognize adding a "custom string" to represent clipped text. It will display within the content area thereby cutting the size of the displayed text. The string itself can be clipped if there is not enough space.

Fade will add an effect that fades out at the end of a line to transparency. This also has inconsistent browser support.

#HTML #CSS #coding #web #textoverflow #useellipsisfortextoverflow #usefadefortextoverflow #clipfortextoverflow #useacustomstringfortextoverflow #cssoverflow #cssoverflowproperty #codinglife #webdesign #designerslearncode #dailycodesnippet #codingforbeginners #tags #openingtag #closingtag #learntocode #codingtutorial #htmltutorial #csstutorial #webdevelopment #htmltutorialforbeginners #csstutorialforbeginners #programmingforbeginners #htmlcssfullcourse