Detailed explanation of commonly used text layout-related properties in CSS layout

This article brings you a detailed explanation of commonly used text layout-related attributes in CSS layout. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Detailed explanation of commonly used text layout-related attributes in CSS layout

1. Use font, etc. to set the text font, color, size, etc.

font-style sets italic, such as font-style: italic;

font-weight sets text thickness, such as font-weight: bold;

font-size Set the text size, such as font-size: 12px; (or 9pt, refer to the CSS manual for display issues in different units)

line-height Set the line spacing, such as line-height: 150%;

color sets the text color (note not font-color), such as color: red;

font-family sets the font, such as font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, Song style, sans-serif; (this is the common writing method)

2. Paragraph layout: use margin, padding and text-align.

Chinese paragraphs use

tags (can also be other containers). Margin or padding can be used on the left and right (equivalent to indentation), and the white space before and after the paragraph. For example:

Sample code

p{
margin: 18px 6px 6px 18px;
/*分别是上、右、下、左，十二点开始的顺时针方向*/
}

The text alignment method uses text-align, for example:

Sample code

p{
text-align: center; /*居中对齐*/
}

The alignment methods include left and right and justify (justify both ends)

3. Vertical text: use writing-mode.

The writing-mode attribute has two values, lr-tb and tb-rl. The former is the default left-right, top-bottom, and the latter is top-bottom, right-left.

For example:

Sample code

p{
writing-mode: tb-rl;
}

can be combined with direction typesetting.

4. Problems with bullets: using list-style

The bullet symbols in CSS include disc (solid dot), circle (hollow circle), square (solid square), decimal ( Arabic numerals), lower-roman (lowercase Roman numerals), upper-roman (uppercase Roman numerals), lower-alpha (lowercase English letters), upper-alpha (uppercase English letters), none (none). For example, set the bullet points of a list (ul or ol) to squares, such as:

Sample code

li{
list-style: square;
}

In addition, list-style also has some values, for example, you can use some small pictures as items Symbol, just write the url ("image address") directly under list-style. But Mb5u.com strongly discourages this approach. It is recommended that you set the picture as the background of li.

5. Drop Cap Effect

Pseudo object: first-letter combined with font-size and float can create a drop cap effect.

For example:

Sample code

p:first-letter{
padding: 6px;
font-size: 32pt;
float: left;
}

6. Text indentation: Use text-indent

text-indent to indent the first line in the container certain unit. For example, Chinese paragraphs usually have two Chinese characters before each paragraph. You can write like this:

Sample code

p{
text-indent: 2em; /*em是相对单位，2em即现在一个字大小的两倍*/
}

If font-size is 12px, then text-indent: 2em will be indented by 24px.

7. Fixed-width Chinese character truncation: use text-overflow (display ellipsis effect)

Use the background language to truncate the field content in the database, for example, truncate 12 Chinese characters ( followed by an ellipsis). But sometimes it is necessary to filter html tags, etc., but using CSS to control does not have this problem. For example, apply the following style to the list:

Sample code

li{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

8. Fixed-width Chinese character (word) line break: use word-break

For example, for example, to Display many place names in a fixed-width container (assuming they are separated by spaces), in order to avoid the place names being broken in the middle (that is, one word is on top and another word is broken to the next line). Then you can use word-break. For example:

Sample code

<div style="width:210px;height: 200px;background: #ccc;word-break:keep-all">
南京上海 上海上 南 上海上海 南京 上海上海上海 南京上海 上海 南京上海 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京上海 上海 南京上海 上海
</div>

It is worth noting that the spaces inside cannot be replaced by (there must be at least one soft space).

9. Chinese character phonetic notation: use ruby ​​tags and ruby-align attributes

For example, phonetic notationzhu yin, you can use ruby-align to set the alignment. This is seen in the CSS manual. You can check the ruby-align item for details.

The above is a detailed introduction to the commonly used text layout-related attributes in CSS layout. If you want to know more about CSS3 tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of Detailed explanation of commonly used text layout-related properties in CSS layout. For more information, please follow other related articles on the PHP Chinese website!