Предотвратить разрыв строки между двумя элементами в CSS - PullRequest
Новая
       7

Предотвратить разрыв строки между двумя элементами в CSS

15 голосов
/ 19 марта 2010

Для какой-то основной работы по макету, которую я делаю, я хотел бы, чтобы ссылки, которые следовали сразу за ценой, всегда отображались в одной строке с ценой. Текст цены заключен в тег <span class="price">, в то время как ссылка использует класс ссылки на покупку, как в <a href="/buy" class="buy-link">Buy Now</a>.

Я ищу CSS, который автоматически предотвратит разрыв строки между тегами span и a, но я либо что-то упустил, либо это невозможно сделать. Я могу легко предотвратить разрывы строк внутри двух тегов - но не между ними.

Я хочу избежать оборачивания обоих тегов в span с помощью white-space: nowrap вручную и по возможности использовать чистый CSS.

Обновление: HTML выглядит примерно так: Это не настоящий код, но очень похожий. 

<style>
    .price{ font-weight: bold; }
    .buy-link{ color: green; }
</style>

<span class="price">$50</span> <a href="/buy" class="buy-link">Buy Now</a>

Если ссылка оказывается рядом с краем страницы - или с краем блока в браузерах <div> или <table>, ссылка "Купить сейчас" будет перенесена на следующую строку. Разделение двух элементов.

Ответы [ 5 ]

10 голосов
/ 19 марта 2010

Разве вы не можете вложить якорь в промежуток, как 

<span class="price"><a href="/buy" class="buy-link">Buy Now</a>&nbsp;Only $19.95!</span>

, а затем установить промежуток в пробел: nowrap?

6 голосов
/ 19 марта 2010 
<span class="price">$50</span>&nbsp;<a href="/buy" class="buy-link">Buy Now</a>
1 голос
/ 03 сентября 2013

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

Сначала поместите это в заголовок вашего HTML: 

<style type="text/css">
.makeBold /* to only be used with SPAN: (i.e.) <span class="makeBold"></span>  */
{
   font-weight:bold;
   width:122px;    /* This should be the width length of the thing you are bolding */
   white-space:nowrap; 
}
</style>

Позже в теле вашего HTML вы должны просто использовать span. 

<span class="makeBold">BOLD THIS TEXT</span>

Вы можете использовать span внутри Div и оставаться совместимым с HTML5.

Наслаждайтесь

1 голос
/ 12 июля 2012

Решение с использованием метода css white-space: nowrap 

<style>
   div{width:10px;white-space:nowrap;}
  .price{ font-weight: bold; }
  .buy-link{ color: green; }
</style>
<div>
  <span class="price">$50</span>
  <a href="/buy" class="buy-link">Buy Now</a>
</div>​

Решение с использованием метода HTML (Если вы не хотите использовать пробел:nowrap;) 

    <style>
        .price{ font-weight: bold; }
        .buy-link{ color: green; }
    </style>

    <span class="price">$50</span>&nbsp;<a href="/buy" class="buy-link">Buy&nbsp;Now</a>
<!--Just removing the breaking whitespace between "Buy" and "Now"-->

* Просто убрал разрывную пробелу между «Buy» и «Now» и вставил nbsp (неразрывный пробел), чтобы разрыв / перенос не выполнялсяt происходит *

См. эту скрипку с эффектом переноса: http://jsfiddle.net/8SP2C/2/

См. эту скрипку с помощью css white-space:nowrap: http://jsfiddle.net/8SP2C/1/

Посмотрите эту скрипку методом html: http://jsfiddle.net/8SP2C/3/

0 голосов
/ 19 марта 2010

Поскольку элемент <span> предназначен для группировки inline по умолчанию, цена и ссылка должны быть в одной строке.

Я полагаю, что некоторые CSS переопределяют его.

...