The text – overflow and word – wrap

Text-overflow sets whether to use an ellipsis flag (…) Marks an overflow of text within an object.

Grammar:

However, text-overflow is only used to specify how to display text when it overflows. In order to achieve ellipsis effect when it overflows, we also need to define forcing text to be displayed in a line (white-space:nowrap) and overflow:hidden. This is the only way to achieve the ellipsis effect of overflow text, the code is as follows:

text-overflow:ellipsis; 
overflow:hidden; 
white-space:nowrap; 
Copy the code

Word-wrap can also be used to set the behavior of the text, whether or not the current line breaks when it exceeds the bounds of the specified container.

Grammar:

Normal is the default value of the browser, and break-word is used to break lines inside long words or URLS. This property is not commonly used, so use the default value of the browser.

Embed the font @font-face

@font-face can load font files on the server side so that the browser side can display fonts that are not installed on the user’s computer.

Grammar:

@font-face {font-family: font name; SRC: the relative or absolute path of the font file on the server; }Copy the code

After this setting, you can set the font style in (font-*) just as you would with a normal font.

Such as:

p { font-size :12px; font-family : "My Font"; /* set @font-face font-family to the same value */}Copy the code

Text shadow text-shadow

Text-shadow can be used to set the shadow effect of text.

Grammar:

text-shadow: X-Offset Y-Offset blur color;
Copy the code

X-offset: indicates the horizontal Offset distance of the shadow. If the value is positive, the shadow will shift to the right and vice versa.

Y-offset: refers to the vertical Offset distance of the shadow. If the value is positive, the shadow is Offset downward and vice versa.

Blur: refers to the Blur degree of the shadow. The value cannot be negative. If the value is larger, the shadow will be more blurred; otherwise, the shadow will be clearer.

Color: Refers to the Color of the shadow, which can be rGBA Color.

Such as:

text-shadow: 0 1px 1px #fff
Copy the code

Source: MOOCs