Home > Article > Web Front-end > Explanation of code examples for aligning text at both ends with css
Explanation of code examples for aligning text at both ends with css
- 不言forward
- 2018-11-12 15:40:402529browse
The content of this article is to explain the code examples of CSS to achieve text alignment at both ends. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
When making forms, we often encounter the situation of aligning the upper and lower fields, such as name, mobile phone number, and birthplace. In this way we will use text-align and text-justify styles.
Just set text-align to justify directly. The situation of text-justify is complicated, and some people may not be familiar with it. The values for IE are as follows:
auto: Allows the browser user agent to determine the alignment rule to use
inter-word: Aligns text by adding spaces between words. This behavior is the fastest way to align all lines of text. Its justifying behavior has no effect on the last line of a paragraph
newspaper : Aligns text by increasing or decreasing the space between words or letters. Is the most precise format for justifying the Latin alphabet
distribute: handles spaces much like newspaper
distribute-all-lines: aligns lines in the same way as distribute, also Also excludes the last line of two aligned paragraphs. Applies to ideographic documents
inter-ideograph : Provides full justification for ideographic text. It increases or decreases the spaces between ideograms and words
But it was first implemented as a private implementation of IE, like text-overflow, overflow-x, etc., and was only implemented very late in FF. In other words, it has strict compatibility question. And in FF and Chrome, you need to manually insert blank spaces or soft line breaks between Chinese characters to take effect. The resistance encountered in Chrome is even greater. p>
Plan:
.test1 {
text-align:justify;
text-justify:distribute-all-lines;/*ie6-8*/
text-align-last:justify;/* ie9*/
-moz-text-align-last:justify;/*ff*/
-webkit-text-align-last:justify;/*chrome 20+*/
}
@media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
.test1:after{
content:".";
display: inline-block;
width:100%;
overflow:hidden;
height:0;
}
}
运行代码：
<!DOCTYPE HTML>
<html>
<head>
<title>文本两端对齐 </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.box1{
background:red;
width:30%;
}
.test1 {
text-align:justify;
text-justify:distribute-all-lines;/*ie6-8*/
text-align-last:justify;/* ie9*/
-moz-text-align-last:justify;/*ff*/
-webkit-text-align-last:justify;/*chrome 20+*/
}
@media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
.test1:after{
content:".";
display: inline-block;
width:100%;
overflow:hidden;
height:0;
}
}
</style>
</head>
<body>
<div class="box1">
<div class="test1">姓 名</div>
<div class="test1">姓 名 姓 名</div>
<div class="test1">姓 名 名</div>
<div class="test1">所 在 地</div>
<div class="test1">工 作 单 位</div>
</div>
</body>
</html>
The above is the detailed content of Explanation of code examples for aligning text at both ends with css. For more information, please follow other related articles on the PHP Chinese website!