<span> текст с отступом

Итак, я имитирую раскладку таблицы с div, и в нее входит пара. Я хотел бы, чтобы диапазон справа отступал от любого текста, который обертывается. Я пробовал несколько вещей и не могу заставить его работать. Любая помощь будет оценена.

jsFiddle: http://jsfiddle.net/2Wbuv/

HTML

<div class="display-element">
    <span class="display-label">Field 1</span>
    <span class="display-field">This is my string of data, some times it is pretty long.  Sometimes it is not.  This one is.</span>
</div>
<div class="display-element">
    <span class="display-label">Field 2</span>
    <span class="display-field">This is another string of data.</span>
</div>

CSS

.display-element        {}

.display-label          {display: inline-block;
                         width: 100px;
                         padding-left: 5px;}

.display-field          {display: inline;}

Ответы

Ответ 1

Проверьте это: http://jsfiddle.net/2Wbuv/2/

.display-element {
}

.display-label {
  display: inline-block;
  width: 100px;
  padding-left: 5px;
}

.display-field {
  display: inline-block;
  padding-left: 50px;
  text-indent: -50px;
  vertical-align: top;
  width: 200px; /* for testing purposes only */
}

<div class="display-element">
  <span class="display-label">Field 1</span>
  <span class="display-field">This is my string of data, some times it is pretty long.  Sometimes it is not.  This one is.</span>
</div>
<div class="display-element">
  <span class="display-label">Field 2</span>
  <span class="display-field">This is another string of data.</span>
</div>

Ответ 2

Похоже, вам нужен висячий отступ. CSS что-то вроде этого должен сделать трюк:

.hanging-indent
{
  text-indent : -3em ;
  margin-left :  3em ;
}

Но так как ваш <span> является встроенным элементом, свойство text-indent, а также другие свойства CSS, относящиеся к блоку, не имеют смысла.

Ответ 3

черновик CSS 3 указывает висячий отступ. Если они поддерживаются браузерами, следующее должно работать:

.hanging-indent
{
  text-indent: 3em hanging each-line;
}

К сожалению, ни hanging, ни each-line значения в настоящее время не поддерживаются в современных браузерах в качестве спецификации Текстовый модуль CSS уровня 3 по-прежнему является черновиком.

Функция реализована с префиксом для браузера WebKit и Chromium. Для Firefox есть открытая ошибка, которую вы можете проголосовать.