Learn web standards and follow web standards for development and production. 52CSS.com has been discussing with you many issues related to layout, and the main content presented on the page is pictures and text. Today, we will discuss with you the issues related to text layout in CSS web page layout.
How to set font, color, size, paragraph space, drop cap, and first line indent. Finally, we will talk about some commonly used Chinese layouts on web pages, such as truncation of Chinese characters, fixed-width word wrapping (word-wrap and word-break), etc. Because I am just writing some application experience, if you need a complete introduction to CSS properties and a more in-depth study, you are welcome to refer to more tutorials on 52CSS.com.
1. Set the text font, color, size, etc. using font, etc.
font-style sets italics, such as font-style: italic;
font-weight sets the text thickness, such as font-weight: bold;
font-size sets the text size, such as font-size: 12px; (or 9pt, please refer to the CSS manual for display issues in different units)
line-height sets 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 Dynasty, sans-serif; (this is a common writing method)
2. Paragraph layout: use margin, padding and text-align.
Chinese paragraphs use the <p> tag (or other containers). Margin or padding can be used for the left and right (equivalent to indentation) and the white space before and after the paragraph. for example:
Example Source Code [www.downcodes.com]
p{
margin: 18px 6px 6px 18px;
/*They are up, right, down, left, clockwise starting at twelve o'clock*/
}
Use text-align for text alignment, for example:
Example Source Code [www.downcodes.com]
p{
text-align: center; /*center alignment*/
}
Alignment methods include left, right and justify (justify both ends)
There are many novices who are not very familiar with margin and padding. See the picture below for the representation.
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:
Example Source Code [www.downcodes.com]
p{
writing-mode: tb-rl;
}
Can be combined with direction typesetting.
4. Bullet problem: using list-style
Bullet symbols in CSS include disc (solid dot), circle (open 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 bullets of a list (ul or ol) to squares, such as:
Example Source Code [www.downcodes.com]
li{
list-style: square;
}
In addition, list-style also has some values. For example, you can use some small pictures as bullet points, and just write the url ("picture address") directly under list-style. But 52CSS.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 can be used with font-size and float to create a drop cap effect.
for example:
Example Source Code [www.downcodes.com]
p:first-letter{
padding: 6px;
font-size: 32pt;
float: left;
}
6. Text indentation: use text-indent
text-indent can indent the first line in the container by a certain unit. For example, Chinese paragraphs usually have two Chinese characters before each paragraph. It can be written like this:
Example Source Code [www.downcodes.com]
p{
text-indent: 2em; /*em is a relative unit, 2em is twice the size of a word*/
}
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)
The background language can be used to truncate the field content in the database, for example, 12 Chinese characters (using ellipses afterward). 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 a list:
Example Source Code [www.downcodes.com]
li{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
8. Fixed-width Chinese character (word) line break: use word-break
For example, if you want to display many place names (assumed to be separated by spaces) in a fixed-width container, 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:
Example Source Code [www.downcodes.com]
<div style="width:210px;height: 200px;background: #ccc;word-break:keep-all">
Nanjing Shanghai Shanghai Nanjing Shanghai Nanjing Shanghai Shanghai Shanghai Nanjing Shanghai Shanghai Nanjing Shanghai Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Shanghai Nanjing Shanghai Shanghai
</div>
It is worth noting that the spaces inside cannot be replaced by (there must be at least one soft space). .
9. Chinese phonetic notation: using ruby tags and ruby-align attributes
For example, for <ruby>Zhuyin<rt style="font-size: 11px;">zhu yin</rt></ruby>, 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.