Coding for Beginners: Recap #69—How to Indent Text and how to Handle Text Overflow
Interested in Web Access Pro to analyze and fix Accessibility Errors on your site? Get your 14 Day Free Trial: https://join.designerslearncode.com/w...
The Daily Code Snippet is part of our "Coding for Beginners" video series for designers to learn the basics of HTML and CSS coding. We teach a single, easy to understand concept in each video so that you can learn to code even if you have a busy schedule. Subscribe here: / @designerslearncode
------
Text-indent is used to adjust the length of the empty space placed before lines of text in a text block. The property accepts lengths in the units we have described previously as well as percentages. In this case, the amount of indentation is a percentage of the width of the containing block. Negative values are also accepted.
There are two experimental values that will have inconsistent browser support:
eachline so the indentation will affect the first line of a block container & each line after a forced line break
hanging reverses this process. In this case, all lines except the first line are indented
With regards to the experimental values, if you were to use them, this is the correct syntax:
selector {
text-indent: 20px eachline;
}
selector {
text-indent: 20px hanging;
}
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 #webdesign #web #designerslearncode #dailycodesnippet #codingforbeginners #accessibility #learntocode #textindent #howtoindenttext #textoverflow #overflow #ellipsistocliptext #usingacustomstringtocliptext #cliptextthatoverflows #learntocodepythonforbeginners #webdevelopment #textoverflowcss #learnhtmlfullcourse #htmltutorialforbeginners #codingcourse #learntocodeforfree #csstutorialforbeginners #codinglife #htmlcssfullcourse