text indenting not working inline with HTML5
Question
There is two columns, I put text-indent , but its only affecting left column, both columns are inside same class, but only left side is working, why? The right columns should be looking same as left column, and what is the difference between .newspaper, span{} and
.newspaper span{}?
<!DOCTYPE html> <html> <head> <style> body{ width:600px; } .newspaper { text-align: justify; -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ column-count: 2; font-family: "Times New Roman", Times, serif; } .newspaper, span{ text-indent: 2em; } </style> </head> <body> <div class="newspaper"> <span>yuyuy yuyuy yuyuy yuy</span> amet, consectetuer adipiscing elit. feeeeeeeeeeeeeeee </br> <span>yuyuy yuyuy yuyuy yuy</span> amet, consectetuer adipiscing elit. feeeeeeeeeeeeeeee </div> </body> </html>
3 answers
solution1
2 ACCPTED 2018-05-26 14:36:28
1st Question:
The reason your text-indent is only working on the left column, is because The text-indent property specifies the indentation of the first line in a text-block, and because your spanning the same text block over two columns, the first line is the start of the left column. What you could is add some padding left to the spans instead.. Like so..
.newspaper span {
padding-left: 2em;
}
2nd Question:
The difference between .newspaper, span{} and .newspaper span{} is that your Styling inside of .newspaper, span{} gets applied to both the .newspaper class and ALL spans having the comma is equal to having...
span{
text-indent:2em;
}
...in your stylesheet.
Where as without the comma you are simply selecting all spans within that class.
solution2
1 2018-05-26 14:51:09
text-indent property is intended for block containers, as noted in the specs
Additionally, another note specific to you:
Since the text-indent property only affects the “first formatted line”, a line after a forced break will not be indented.
<span> is not considered a block level element, see this discussion here
By default, block-level elements are formatted differently than inline elements. Generally, block-level elements begin on new lines, inline elements do not.
solution3
0 2019-08-26 05:31:44
span {
text-indent: 2em;
display: flex;
}
and:
span {
text-indent: 2em;
display: inline-flex;
}
The above code samples work in the case of indenting the whole block of element text (including overflowing text which may form a new line).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.