CSS3 Text Model

I am a front-end developer, often encounter questions about the text model, many places we often encounter this problem. For example, the title of the column, when the designer gave us the picture does not take into account the length of the title, so we develop ourselves in the process of attention to this point.

First, we will take a look at some basic properties of the text model and then analyze it for some cases.

<text> Model Properties

Property	Describe	Css
Text-overflow	Specifies what happens when the text overflows the containing element	3
Text-fill-color	Specify fill color for text
Text-stroke	To stroke text
Text-stroke-width	To the width of the text stroke
Text-stroke-color	Color for text strokes
Text-shadow	Add a shadow to text	3
Word-break	Rules for line breaks in non-Japanese and Korean texts	3
Word-wrap	Allows splitting of long, indivisible words and wrapping to the next line	3

Text-overflow

Value	Describe
Clip	Build text
Ellipsis	Show ellipsis to represent trimmed text
String	Uses the given string to represent the trimmed text

Case one: Limit the number of words through Overflow:hidden

Show graph above, this way need to limit height and row height, want to control the content in the real scope, so this way is not recommended in the way, there is no use of text model

Case two: through Text-overflow:ellipsis;

This approach is more desired in development projects because he has no requirements for line heights and restricts the behavior of line breaks

CSS3 Text Model