Выравнивание слов в HTML

Question

[HTML]
Какое самое простое решение (наименьшее количество кода) для выравнивания слов при использовании немоноширинного шрифта?

Мне нужно добиться этого:

 "... Просто какой-то случайный текст. это
       это просто какой-то случайный текст.
       Это просто какой-то случайный
       текст. Это просто случайно. "

"is" должно быть точно выровнено со словом "just" выше

Что я пробовал до сих пор:

(1) было бы решением, но не работает для меня, кажется устаревшим:

text text text text <tab id=t1>target text<br>
<tab to=t1>Should be aligned with target.

(Добавление кавычек к "t1" в обеих строках также не помогает.)

(2) Отрицательный отступ для первой строки:

text-indent: -3em;

Это работает, но это не точный метод, так как мне нужно визуально отрегулировать число em, чтобы согласовать выравнивание. Плюс: в зависимости от шрифта и размера пользователя и т. Д. Выравнивание не обязательно будет соответствовать пользователю.

Не найти решения простых проблем сводит меня с ума:(

Answer 1

Как это: http://codepen.io/anon/pen/GZLMjG

Используйте два DIV, float они оба left, с width: auto;, Поместите текст, который должен быть слева, в первый DIV, а остальные - во второй. использование <br> теги, чтобы получить разрывы строк во втором DIV.

(Окружающий DIV в моем коде не был бы необходим, только чтобы он выглядел лучше.)

PS: я положил   в конце первой части текста, чтобы оставить пробел после этого слова.

Answer 2

Вы можете сделать это с грязной ::before хаки:

span.aligned {
  font-family: sans-serif;
  display: block;
  white-space: pre;
  position: relative;
  margin-left: 30px;
}

span.aligned::before {
  content: "« ...";
  position: absolute;
  left: -30px;
}

span.aligned::after {
  content: " »";
}

<span class="aligned">Just some random text. This
is just some random text.
This is just some random
text. This is just random.</span>

Это требует, чтобы вы жестко закодировали желаемое пространство между < ... и содержание, но оно довольно гибкое, помимо этой маленькой детали.

Answer 3

Вы можете поместить весь выровненный текст в inline-block элемент и дать ему vertical-align:text-top;,

span.pre {
   display: inline-block;
   vertical-align: text-top;
 }

<p>« ... just <span class="pre">some random text. This<br>
is just some random text.<br>
This is just some random<br>
text. This is just random. »</span> 
</p>

РЕДАКТИРОВАТЬ: В Firefox vertical-align:top; кажется, работает на меня.

span.pre {
       display: inline-block;
       vertical-align: top;
     }

<p>« ... just <span class="pre">some random text. This<br>
    is just some random text.<br>
    This is just some random<br>
    text. This is just random. »</span> 
    </p>

Эти два значения определены по- разному, но у меня нет объяснения, почему Chrome отображает их одинаково, а Firefox - нет:

top: выровняйте верх элемента и его потомков с верхом всей строки.

text-top: выравнивает верх элемента с верхом шрифта родительского элемента.

Answer 4

Гибкий и простой способ использования before псевдо, но если вам нужно сделать это динамически, вы можете сделать это с помощью небольшого кода JS, стиль вашего абзаца с position relative и поместите свой перед текст в span внутри него и дайте ему position absolute а потом отдай left позиция, основанная на его ширине, поэтому, если span span = 50, тогда левая позиция будет равна -50 и несколько пикселей, чтобы сделать пространство между ним и абзацем https://jsfiddle.net/qhdxedxo/

$(document).ready(function () {

  var cont            = $('.cont');
  var contWidth       = $('.cont').width();
  var before          = $('.before');
  var beforeWidth     = before.width();
  var paragraph       = cont.find('p');

  cont.css({
    paddingLeft: beforeWidth
  });

  before.css({
    left: - beforeWidth - 5
  });

});

.cont {
  padding-left: 50px;
  padding-top: 20px;
  width: 300px;
  height: 400px;
  background-color: #eee;

}

p {
  display: block;
  position: relative;
  background-color: #eee;
  width: 80%;
  float: right
}

.before {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="cont">
  <p>
    <span class="before">« ...</span>
    Just some random text. This
    is just some random text.
    This is just some random
    text. This is just random
    is just some random
    text. This is just random. »</p>
</div>