Как выровнять строку с отступом в промежутке, который оборачивается в несколько строк?

У кого-нибудь есть идеи как выровнять вторую строку?

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

<span class="info"></span>

Ответ 1

display:block;

тогда у вас есть элемент блока, и маржа добавляется ко всем строкам.

Хотя верно, что span семантически не является блочным элементом, бывают случаи, когда вы не контролируете страницы DOM. Этот ответ предназначен для них.

Ответ 2

Элементы <span> являются встроенными элементами, поскольку такие свойства макета, как width или margin, не работают. Это можно исправить, изменив <span> на блочный элемент (например, <div>), или взамен воспользовавшись отступом.

Обратите внимание, что превращение элемента span в блочный элемент путем добавления display: block; является избыточным, поскольку span по определению является встроенным элементом без стиля, в то время как div является блочным элементом без стиля. Поэтому правильное решение - использовать div вместо block- span.

Ответ 3

span - это встроенный элемент, который означает, что если вы используете <br/>, он будет считаться одной строкой.

Измените span на элемент блока или добавьте display:block в свой класс.

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

Ответ 4

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

Ответ 5

попробуйте добавить display: block; (или заменить <span> на <div>) (обратите внимание, что это может вызвать другие проблемы, потому что <span> является встроенным по умолчанию - но вы не разместили остальную часть своего HTML)

Ответ 6

Также вы можете попробовать использовать

display:inline-block;

если вы хотите, чтобы элемент span выравнивался по горизонтали.

Если вы хотите выравнивать элементы span по вертикали, просто используйте

 display:block;

Ответ 7

Вы хотите, чтобы несколько строк текста отступали слева. Попробуйте следующее:

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>