CODEWITHSUNDEEP
csshtml
DarkLeafyGreen
DarkLeafyGreen

Reputation: 70416

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

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>

Upvotes: 57

Views: 201514

Answers (7)

poke
poke

Reputation: 387707

<span> elements are inline elements, as such layout properties 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.

Note that making a span element a block element by adding display: block; is redundant, as a span is by definition a otherwise style-less inline element whereas div is an otherwise style-less block element. So the correct solution is to use a div instead of a block-span.

Upvotes: 25

Mohammad Badiuzzaman
Mohammad Badiuzzaman

Reputation: 748

<!DOCTYPE html>
<html>
<body>

<span style="white-space:pre-wrap;">
Line no one
Line no two
And many more line.
This is Manik
End of Line
</span>

</body>
</html>

Upvotes: 10

choise
choise

Reputation: 25244

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.

Upvotes: 88

Daniel Nyamasyo
Daniel Nyamasyo

Reputation: 2312

Also you can try to use 

display:inline-block;

if you would like the span element to align horizontally.

Incase you would like to align span elements vertically, just use

 display:block;

Upvotes: 5

tzot
tzot

Reputation: 95941

You want multiple lines of text indented on the left. Try the following:

CSS:

div.info {
    margin-left: 10px;
}

span.info {
    color: #b1b1b1;
    font-size: 11px;
    font-style: italic;
    font-weight:bold;
}

HTML:

<div class="info"><span class="info">blah blah <br/> blah blah</span></div>

Upvotes: 1

Shikiryu
Shikiryu

Reputation: 10219

span is a inline element which means if you use <br/> it'll b considered as one line anyway.

Change span to a block element or add display:block to your class.

http://www.jsfiddle.net/tZtpr/1/

Upvotes: 11

oezi
oezi

Reputation: 51807

try to add display: block; (or replace the <span> by a <div>) (note that this could cause other problems becuase a <span> is inline by default - but you havn't posted the rest of your html)

Upvotes: 5

Related Questions