A few things about text attributes of CSS basics_html/css_WEB-ITnose

line-height

You can specify a scaling factor without a unit for an element, so that its descendant elements will inherit this scaling factor and then adjust it according to their own font size To calculate your own line-height value,

body {  font-size: 12px;  line-height: 1.5;}h1 {  font-size: 36px;}

Here, the line-height of body is 18px (12 * 1.5), and the line-height of h1 is is 54px (36*1.5).

Even if relative units such as em and percentage are used, descendant elements still inherit the calculated line-height (line-height) value. For example, if the line-height of the body above is changed to 1.5em, then the line-height of h1 Will inherit this value 18px.

text-decoration

Text decoration is a non-inherited class attribute. Setting it to none for the body element will not affect the elements in the descendants that have text decoration by default, such as Hyperlink, so if you want to remove the default underline of the hyperlink, you still need to set it separately.

a {  text-decoration: none;}

Although this attribute is not inherited by default, the modification set on the ancestor element will "extend" ” into the descendant elements,

<p>我有下划线 <span>我咋会有下划线呢?</span></p>

p {  color: red;  text-decoration: underline;}p span {  color: green;  text-decoration: none;}

The underscore here is for the p element.

p {  color: red;  text-decoration: underline;}p span {  color: green;  text-decoration: underline;}

Here the underline of span covers the underline of p.

p {  color: red;  text-decoration: underline;}p span {  color: green;  text-decoration: overline;}

Since the extension of text decoration attributes will cause some compatibility issues,

The best way is to set the text-decoration attribute separately for the text that needs to be modified.

text-indent

You can use this attribute to indent the first line of each paragraph by 2 characters instead of using spaces,

p {  text-indent: 2em;}

You can also specify a negative value to produce the effect of the first row hanging,

text-indent: -3em;

Let Hanging quotation marks is also a common practice,

Indent the text to a place far enough that the text disappears,

text-indent: -9999px;

Therefore, the usual method of replacing text on images,

.logo {  background: url(logo.png) no-repeat;  display: inline-block;  height: 36px;  text-indent: -9999px;  width: 72px;}

IE6/7 does not really support inline-block, and in some cases may cause the .logo to disappear. You can Use float or block instead of inline-block, but both will change the layout, and other methods can also be used.

text-overflow

Normally, a long string of URL addresses will overflow when it exceeds the container. We can set it to be omitted when the text overflows the containing container. Symbols,

li {  overflow: hidden;  text-overflow: ellipsis;}

must be used together with overflow: hidden;; sometimes you may have to add a width, such as IE 6,

For those texts that do not overflow by default, you need to force them to be displayed in one line in order to have an effect.

li {  overflow: hidden;  text-overflow: ellipsis;  <strong>white-space</strong>: <strong>nowrap</strong>;  width: 100%; /* for IE 6 */ }

Use white-space: pre; or word-break: keep-all; can also force the text to be displayed on one line, but each has its own problems.

In IE 8/9, sometimes you will find that it has no effect. It may be that one of the ancestor elements has word-wrap: break-word; and this attribute will perform better than white-space : nowrap; is more powerful, so sometimes you have to add the following code,

word-wrap: normal;

text-shadow

in non-white You can achieve beautiful inline effects on dark text on the background.

text-shadow: 0 1px 0 rgba(255,255,255,.75);

You can add multiple shadows to the text, separated by commas,

text-shadow: 0 1px 0 #fff, 0 2px 0 #ddd, 0 3px 0 #ddd, 0 4px 0 #ddd;

white-space

The white-space attribute sets how to handle whitespace within the element.

Set the value to nowrap so that the text can continue on the same line and will not wrap when it encounters a boundary until it encounters the
tag,

white-space: nowrap;

Sometimes we want to retain spaces and line breaks in the text. For example, when displaying computer source code,

 will be used, and the value of the white-space attribute of <pre class="brush:php;toolbar:false"> is pre,  <p class="sycode"> <pre class='brush:php;toolbar:false;'>pre {  white-space: pre;}

pre is not so satisfactory. It will not automatically wrap when encountering a boundary, so CSS 2.1 adds pre-wrap,

pre {  white-space: pre;  white-space: pre-wrap;}

In this way, the content in the pre element can not only maintain the original format, but also automatically wrap when the content exceeds the boundary.

Since not all browsers support pre-wrap, you need to force those browsers that do not support line breaks,

pre {  white-space: pre;  white-space: pre-wrap;  <strong>word-wrap</strong>:<strong> break-word</strong>;}

Of course, maybe you don’t If you want line breaks and don’t mind horizontal scroll bars, you can use horizontal scroll bars to replace line breaks,

pre {  overflow: auto;}

word-break

Currently, the webkit family (including Google Chrome, Safari, Android Browser, etc.) does not support the keep-all value, so the only one that can be used is break-all,

word-break: break-all;

However, it will cause difficulties in reading English text and should be used with caution,

 

word-wrap

这是比 word-break 更好的实现文本换行的方式，

word-wrap: break-word;

再添加一个溢出隐藏，避免一些恶意的连续字符，

overflow: hidden;