CSS создает отступ перед переносом строки

Question

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

Текущий код CSS:

span.highlight { background: #0058be; color: #FFF; padding: 2px 5px; }

Answer 1

Мне пришлось добавить дополнительные margin-left:0;, чтобы две строки начинались в одной и той же точке.

Это можно сделать с помощью чистого CSS.Создайте сплошную box-shadow слева и справа от выделения в том же цвете (и используйте margin, чтобы исправить расстояние).Для вашего случая:

span.highlight { 
  background: #0058be;
  color: #FFF;
  box-shadow:5px 0 0 #0058be, -5px 0 0 #0058be;
  padding: 2px 0;
  margin:0 5px;
}

Answer 2

Потребовалось несколько попыток, но вот оно: однострочный и многострочный маркер с дополнительным заполнением .

HTML:

<h3>Welcome to guubo.com, Gajus Kuizinas</h3>
<p><span>So far you have joined: </span><em>Networks guubo.com</em><ins></ins></p>

CSS:

h3 {
  padding-left: 5px;
}
p {
    background: #0058be;
    position: relative;
    padding: 0 5px;
    line-height: 23px;
    text-align: justify;
    z-index: 0;
}
p span {
    background: #fff;
    padding: 2px 0 2px 5px;
    position: relative;
    left: -5px;
}
p em {
    background-color: #0058be;
    color: #fff;
    padding: 2px 5px;
}
ins {
    position: absolute;
    width: 100%;
    line-height: 23px;
    height: 23px;
    right: -5px;
    bottom: 0;
    background: #fff;
    z-index: -1;
}

Хитрость заключается в том, чтобы стилизовать весь абзац с синим фоном, а поверх него помещать только белый фон в начале и в конце.Это обеспечивает синий фон в другом месте ...;)

Два основных недостатка:

• Подсвеченный текст должен начинаться с первой строки (но не обязательно должен переходить ввторой),
• Абзац должен быть выровнен с выравниванием.

Протестировано в Opera 11, Chrome 11, IE7, IE8, IE9, FF4 и Safari 5 со всеми DTD.

См. Историю изменений для предыдущих менее успешных попыток.

Answer 3

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

Хитрость заключается в том, чтобы использовать опцию распространения box-shadow , а заполнение встроенных элементов ведет себякак вы ожидаете.

.highlight {
    background: black;
    color: white;
    box-shadow: 0 0 0 5px black;
}

Answer 4

Может быть, вы можете использовать эту технику.http://samcroft.co.uk/2011/jquery-plugin-for-inline-text-backgrounds/

Answer 5

display: block достигнет части того, что вы хотите, но, конечно, это сделает span элементом блока, и поэтому вы не сможете увидеть поведение обтекания в вашем примере.

ВашСнимок экрана содержит подсказку о том, что вам нужно попробовать и сделать: вам нужно наложить поле слева и справа от вашего «обычного» текста абзаца, а затем пренебречь этим интервалом (и включить его отступ), чтобы добиться «вылет "вашей синей подсветки по сравнению с остальным текстом.Вы не можете сделать это с прямым CSS на вашем промежутке, потому что он охватывает две строки и, очевидно, «левый» и «правый» относятся только к промежутку, а не к отдельным частям текста, содержащимся в нем.

ПрямойCSS здесь не ответ.Возможно, вы захотите взглянуть на этот вопрос, который использует jQuery filter для захвата первого слова в сущности и т. Д.:

jQuery: селектор первого слова

Answer 6

Самое близкое, если бы это действительно так много значило, я бы сказал, это добавить display: inline-block;