Подтвердить что ты не робот

Можно ли начинать каждую строку встроенного элемента с заданным символом?

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit, "sed do eiusmod time incididunt ut labore
" et dolore magna aliqua "." ullamco labis nisi ut aliquip ex ea commodo ". Duis aute
" irure dolor in reprehenderit in voluptate velit esse" cillum dolore eu fugiat nulla pariatur.

Мне удалось выполнить эту работу, если цитата является блочным элементом, следующим образом:

<blockquote style="position:relative; overflow:hidden; ">
  <div style="position:absolute; ">"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br>"<br></div>
  <div style="position:relative; left:1em; width:90%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</blockquote>
4b9b3361

ОТВЕТЫ

Ответ 1

С псевдоэлементом (без вывода ниже)

Вы можете, вроде, но это грязно. Лучший подход, который я могу думать (это только CSS) - использовать псевдоэлемент и несколько текстовых теней. Одна из них - это то, что предполагается, что открытие " всегда находится в первой строке блока:

blockquote {
    overflow: hidden;
    line-height: 1em;
    position: relative;
    padding-left: .85em;
    text-indent: -.85em;
}

blockquote::before {
    content:"\22";
    position: absolute;
    top: 1.15em; left: .85em;
    text-shadow:
        0 1em 0 #000, 0 2em 0 #000, 0 3em 0 #000,
        0 4em 0 #000, 0 5em 0 #000, 0 6em 0 #000;
}

Вы можете играть здесь немного дальше: http://jsfiddle.net/nx296yc8/1/

enter image description here

Без псевдоэлемента

Вы можете включить все это, если хотите отказаться от псевдоэлемента:

<blockquote style="overflow: hidden; line-height: 1em; position: relative; padding-left: .85em; text-indent: -.85em">
    <span style="position: absolute; top: 1.15em; left: .85em; text-shadow: 0 1em 0 #000, 0 2em 0 #000, 0 3em 0 #000, 0 4em 0 #000, 0 5em 0 #000, 0 6em 0 #000">&quot;</span>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse" cillum dolore eu fugiat nulla pariatur.
</blockquote>