Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use text-align:justify in css to achieve two-end alignment, the article introduces in great detail, has a certain reference value, interested friends must read it!

Use text-align:justify

The text-align:justify attribute is fully compatible, and you need to add [spaces / newline characters / tabs] between modules to work if you use it to align both ends. Similarly, text alignment requires adding [spaces / newline characters / tabs] between words to work.

/ *

Description:

In order to realize the alignment of two ends of a single line within a block in 1.IE, you need to use its private attribute text-align-last:justify. For text-align-last to take effect, you must first define text-align as justify.

2.line-height:0 solves the extra white space at the bottom of the standard browser container

, /

.content {

Text-align:justify

Text-align-last:justify

Line-height:0

Height:44px

}

/ *

Description:

After the module uses [newline] or [space], the webkit browser will cause the last module to have extra white space, which can be cleared by using font-size:0.

, /

@ media all and (- webkit-min-device-pixel-ratio:0) {

.content {

Font-size:0

}

}

/ *

Description:

1.text-align-last:justify is currently only supported by IE, and standard browsers need to use .demo: after pseudo-class to simulate similar effects.

2.opera browser needs to add vertical-align:top to completely solve the excess white space at the bottom.

, /

.content: after {

Display:inline-block

Overflow:hidden

Width:100%

Height:0

Content:''

Vertical-align:top

}

And the subclass must be an inline-block element

These are all the contents of the article "how to use text-align:justify to align both ends in css". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.