Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to align an indented line in a span that wraps into multiple lines?

Tags:

html

css

Does anyone have an idea how to align the second line?

alt text

span.info {    margin-left: 10px;    color: #b1b1b1;    font-size: 11px;    font-style: italic;    font-weight: bold;  }
<span class="info"></span>
like image 339
UpCat Avatar asked Jan 13 '11 08:01

UpCat


People also ask

How do you break a span into two lines?

span is an inline element, as such styling attributes such as width or margin don't work. You can fix that by either changing the span to a block element (such as div ), or by using padding instead.

How do you align items in a span?

To center an inline element like a link or a span or an img, all you need is text-align: center . For multiple inline elements, the process is similar. It's possible by using text-align: center .

Does text-align work on span?

Text is an inline element and so is a span. For text-align to work, it must be used on a block level element (p, div, etc.) to center the inline content.


1 Answers

display:block; 

then you've got a block element and the margin is added to all lines.

While it's true that a span is semantically not a block element, there are cases where you don't have control of the pages DOM. This answer is inteded for those.

like image 156
choise Avatar answered Sep 29 '22 08:09

choise