How to use text-align:justify to realize the alignment of two ends in css
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!
