У меня есть стилизованное предложение с динамическим текстом. Иногда текст слишком длинный и выталкивает якорь в конец за его пределами. Я хочу, чтобы текст обернулся после span.price-difference
, но кнопка привязки была расположена напротив правой части p
.
Я добавил псевдоним :after
в .price-difference
. У меня установлено значение content: ''
и display: block
. Работает в FF, Chrome, IE (включая IE8, который я должен поддерживать), но не Safari.
Существует простой ответ, обертывающий текст, следующий за .price-difference
другим span
, и установите его на block
, но изменение HTML - это проблема, требующая, чтобы разработчик базы данных вносил изменения в JSP файл, и я надеюсь избежать этого. Ищете только решение CSS, если оно существует.
<p class="upsell"> Upgrade To
<span class="stateroom-upgrade"> Concierge Class </span>
for an additional
<span class="price-difference">$7.14 USD </span>
per person per day
<a href="" class="ccButtonNew"><span>View Upgrades</span></a>
</p>
CSS
.upsell {
background: none repeat scroll 0px 0px #FAFAFA;
border-top: 2px dashed #E8E8E8;
color: #666;
display: block;
font-size: 11.5px;
font-weight: 600;
margin: auto 19px 5px;
padding: 8px 0px 8px 8px;
position: relative;
text-transform: none;
white-space: nowrap;
width: 560px;
}
.upsell .price-difference {
color: #0C82C4;
font-size: 15px;
font-weight: 700;
margin-left: 5px;
display: inline-block;
}
.stateroom .upsell .price-difference::after {
content: "";
display: block;
}
.upsell .ccButtonNew {
position: absolute;
right: 10px;
top: 17px;
}
Элемент p
имеет white-space: nowrap
, установленный на нем, но когда я его выключу, проблема не исчезнет.
Я думаю, что это связано со следующей ссылкой, но моя ситуация не то же самое. В этом вопросе вопросчик помещает элемент уровня блока div
внутри a p
, который принимает только встроенные элементы. У меня есть встроенный элемент span
внутри p
. Это должно работать.
: после псевдоэлемента, работающего в FF, но не в Safari или Chrome