发表新帖
发表新帖

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

后端 未结
关注
7 497
不知归路
不知归路 2021-02-04 23:34

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

相关标签:
7条回答
  • 醉话见心
    2021-02-04 23:57 
    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.

    0 讨论(0)
  • 轻奢々
    2021-02-04 23:59 
    <!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>
    0 讨论(0)
  • 小鲜肉
    2021-02-05 00:03

    <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.

    0 讨论(0)
  • 梦谈多话
    2021-02-05 00:05

    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;
    0 讨论(0)
  • 耶瑟儿～
    2021-02-05 00:06

    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/

    0 讨论(0)
  • 孤街浪徒
    2021-02-05 00:12

    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>
    0 讨论(0)
 看不清?
提交回复
热议问题