CSS создает прокладку до разрыва строки

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

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

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

Ответ 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;
}

Ответ 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.

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

Ответ 3

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

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

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

Ответ 4

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

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

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

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

Ответ 5

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

Ответ 6

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