An example of using text-align:justify to align both ends_Experience exchange

WBOY
Release: 2016-05-16 12:07:17
Original
1425 people have browsed it

text-align:justify can only align both ends of the non-last line in multiple lines. There is nothing I can do about a single line. IE has text-justify to solve the problem. By the way, for non-IE users, my method is rubbish because it is only used on special occasions.

Example Source Code [www.52css.com]
.justify{
height:1.1em;
overflow:hidden;
text-align:justify;
text -justify :distribute-all-lines;
}
div.cn:after {
content: "________________________________________";
font-size:100px;
}
That's right In IE, I use content and add content until there is a second row, so that the ends of the first row will be aligned.

However, each browser understands Chinese differently. Firefox directly separates Chinese characters, while Opera does not separate Chinese characters and only recognizes spaces. If you insert half-width English or symbols in the middle of the Chinese characters, it will be uneven. Safari is closer to Opera. They cannot be separated without adding spaces.

English is better, because everyone can only use spaces to separate words, but IE uses text-justify: distribute-all-lines to separate words, which is really ugly. I originally thought about using htc or js to help IE, but I found that IE6 is so stupid. I don’t know what to do if I don’t have IE7 at home.

Or typing spaces is a better way, but browsers like Firefox that only enlarge the text will be XX when the text is enlarged. The bad method I wrote is only useful under certain circumstances. I think of it. In a word: cherish life and stay away from Firefix!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template