Сохранение фонового цвета от текста

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

Как указать текстовое дополнение, в котором происходит разрыв строки, которая работает оперативно?

HTML

<div id="form" class="wrapper wrapper__content bg-img__text-wrapper"> 
    <h2 class="wrapper--heading-h2 heading--white">Message me</h2> 
    <p> 
    <span class="bg-img__span span--bw">Feel free to message myself if you want to discuss a potential website project, or if you are an employer looking for &nbsp; &nbsp; an enthusatic, confident, front-end developer and are happy with the skills I have to offer.</span> 
    </p> 
</div>

CSS

.bg-img__text-wrapper p, .bg-img__text-wrapper h1 { 
text-transform: uppercase; 
letter-spacing: .15rem; 
line-height: 4rem; 
}

источник

2015-09-12 Patrick McDermott

Можете ли вы добавить ссылку jsfiddle здесь? –

У меня есть скрипка. проверить его https://jsfiddle.net/8Lna7xx4 – GAMITG

'text-justify' - это только IE, насколько я знаю ... и я не уверен, насколько хорошо он поддерживается даже в этом браузере. –

Что вы ищете является box-decoration-break собственностью.

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

Теперь ваш исходный пример не показывает фона, поэтому я собираюсь предположить, что фон должен быть yellow. Итак, мы получаем

span { 
    padding:0 1em; 
    box-decoration-break:clone; 
    background:yellow; 
}

или, на практике,

.bg-img__text-wrapper p, 
 
.bg-img__text-wrapper h1 { 
 
    text-transform: uppercase; 
 
    letter-spacing: .15rem; 
 
    line-height: 4rem; 
 
} 
 
.bg-img__text-wrapper p .bg-img__span.span--bw { 
 
    padding: 0 1em; 
 
    -webkit-box-decoration-break: clone; 
 
    -o-box-decoration-break: clone; 
 
    box-decoration-break: clone; 
 
    background: yellow; 
 
}

<div id="form" class="wrapper wrapper__content bg-img__text-wrapper"> 
 
    <h2 class="wrapper--heading-h2 heading--white">Message me</h2> 
 
    <p> 
 
    <span class="bg-img__span span--bw">Feel free to message me if you 
 
     want to discuss a potential website project, or if you are an 
 
     employer looking for an enthusiastic, confident, front-end 
 
     developer and are happy with the skills I have to offer.</span> 
 
    </p> 
 
</div>

Что, в совместимых браузерах, результаты в

, тогда как без box-decoration-break,это выглядело бы так:

Edit:
Это работает в Chrome V22 и выше (с префиксом -webkit-) и Firefox v32 и выше. Но не в IE.

источник

2015-09-12 11:53:39

Возможно упоминать [** поддержка браузера **] (https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break) –

@Paulie_D Хорошо. [MDN] (https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break) и [CanIUse] (http: // caniuse.com/# search = box-decoration-break), похоже, отличается от этого, MDN говорит, что вам нужен префикс '-o-' для Opera, но CanIUse подразумевает, что вам не нужен один для v12 и ниже. Ну что ж. Я редактировал информацию для более распространенных браузеров –

@MrLister спасибо –

как об использовании этого -

@media all and (max-width: 700px) { 
    .bg-img__text-wrapper p /* or whatever */ { 
     padding: 0 10px; 
    } 
}

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

Demo

источник

2015-09-12 12:38:45

Сохранение фонового цвета от текста

ответ

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