2016-08-28 2 views
1

У меня есть скрипка here с использованием :after и :before для ввода цитат.Вертикальное выравнивание, вызывающее выделение для перекрытия, делая текст неразборчивым

Проблема заключается в том, что вы выделяете весь абзац, перекрываете выделения и делаете некоторые слова неразборчивыми.

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

+0

Прежде всего, это, кажется, хорошо для меня, это может быть ваш браузер, который дает проблему. Во-вторых, почему бы вам просто не увеличить расстояние между словами, чтобы оно не перекрывалось. Можете ли вы приложить скриншот, чтобы я мог лучше просмотреть, как вы его видите? – ZombieChowder

ответ

3

Дайте dipslay: inline-block как after, так и before и туда вы идете!

p:before{ 
 
    font-size: 2.5em; 
 
    line-height: 0; 
 
    display: inline-block; 
 
    vertical-align: bottom; 
 
    content: '“'; 
 
    margin-right: 0.125em; 
 
} 
 
p:after{ 
 
    font-size: 2.5em; 
 
    line-height: 0; 
 
    display: inline-block; 
 
    vertical-align: bottom; 
 
    content: '”'; 
 
    margin-left: 0.125em; 
 
}
<p> 
 
Lorem ipsum dolor sit amet, novum errem perfecto id qui, esse antiopam cu sea, eum veniam soleat delicatissimi id. Impedit probatus in sit, quem abhorreant mnesarchum eos ad. Id erat equidem ius. Ne mel scaevola oporteat percipitur, id zril diceret commune cum. Ut mea quodsi labores assentior, populo explicari pro ea. 
 
</p>

+1

Спасибо за такой быстрый ответ! Именно то, что я искал. Не знаю, 'inline-block' исправит его – John

+0

круто, спасибо за помощника! – kukkuz

+0

Не могли бы вы объяснить, почему добавление 'display: inline-block' устраняет проблему? – Taurus

Смежные вопросы