Плавающий текст над текстом

Question

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

Goal: http://i.stack.imgur.com/XC5NA.jpg

Проблема Я бегу в том, что DIV или оболочка создает прямоугольник вокруг текста плавала так короткие строки в тяговой цитатой есть много пробелов слева.

Что я получаю пример: i.stack.imgur.com/bvJv2.jpg

Я хочу, чтобы этот эффект текстового потока, чтобы работать автоматически, который означает, что я не хочу, чтобы установить на каждую линию «ширину» автоматически. Я просто хочу применить класс к div или span и добиться этого. Я также хотел бы сохранить этот HTML/CSS/CSS3. Я не могу легко применить JS к этому, поскольку это закрытая CMS, с которой я имею дело.

Какие-нибудь трюки? Возможно ли это?

Answer 1

То, что вы пытаетесь, невозможно, насколько я знаю, с переносом текста вокруг другого текста.

Это, однако, можно обернуть текст вокруг плавающих фигур. Взгляните на спецификацию для CSS shapes.

Возможно, вы можете сделать что-то с полигоном, чтобы создать эффект, который вы пытаетесь выполнить; хотя, я подозреваю, что это будет проблемой, поскольку вполне вероятно, что содержание ваших цитат динамично.

Answer 2

А что делать что-то вроде этого: https://jsfiddle.net/ToreanJoel/wfoezo0t/1/

Создание h1 метки и поставить некоторые пролеты в них для каждого слова/нескольких слов.

<h1> 
    <span>"This is a</span> 
    <span class="spacer"></span> 
    <span>blockquote</span> 
    <span class="spacer"></span> 
    <span>to test"</span> 
</h1> 

---

Тогда для CSS следующего:

h1 { 
    font-size:44px; 
    margin: 0; 
    font-family: sans-serif; 
} 
h1 span{ 
    float:right; 
    text-align: right; 
    clear:both; 
    margin: 0; 
    margin-left: 14px; 
} 

.spacer { 
    height: 10px; 
} 
.paragraph { 
    text-align: justify; 
} 

---

Примечание им сделать текст вокруг заголовка (.paragraph класса) оправданный и что даст вам что-то вроде этого: https://jsfiddle.net/ToreanJoel/wfoezo0t/1/

запомнить его редактировать для вашего любимого удачи