Ломать новую строку с встроенным блоком?

Я хочу удалить <br /> и сделать строки прерывания через CSS. Если я изменил промежутки на display:block, ширина будет равна 100%, и мне нужна ширина, чтобы быть точно такой же длиной текста, как сейчас. Любые предложения?

<div class="fullscreen">
    <p class="text">
        <span class="medium">We</span> <br />
        <span class="large">build</span> <br />
        <span class="medium">the</span> <br />
        <span class="large">Internet</span>
    </p>
</div>

.text span {
   background:rgba(165, 220, 79, 0.8);
   display:inline-block;
   padding:7px 10px;
   color:white;
}
.fullscreen .large {  font-size:80px }

Fidddle

Ответы

Ответ 1

Удалите все теги br и используйте стиль ниже.

.text span {
   background:rgba(165, 220, 79, 0.8);
   display:table;
   padding:7px 10px;
   color:white;
}
.fullscreen .large {  font-size:80px }

Ответ 2

используйте float: left; и clear: left;

http://jsfiddle.net/rtM6J/

.text span {
   background: rgba(165, 220, 79, 0.8);
   float: left;
   clear: left;
   padding: 7px 10px;
   color: #fff;
}

Ответ 3

Задайте элементы в display: inline и используйте :after:

.text span { display: inline }
.break-after:after { content: '\A'; white-space:pre; }

и добавьте класс в ваши html-интервалы:

<span class="medium break-after">We</span>

Ответ 4

Я думаю, что поплавки могут работать лучше всего для вас здесь, если вы не хотите, чтобы элемент занимал всю строку, float it left должен работать.

.text span {
       background:rgba(165, 220, 79, 0.8);
       float: left;
       clear: left;
       padding:7px 10px;
       color:white;
    }

Примечание. Удалите <br/>, прежде чем использовать этот курс.

Ответ 5

Если вы не используете <p> (только <div> и <span> s), это решение может даже позволить вам выровнять ваш центр inline-block или правый, если вы хотите (или просто сохранить их оставили, то, как вас попросили). Хотя решение может по-прежнему работать с <p> s, я не думаю, что получившийся HTML-код был бы совершенно правильным, но это все равно.

Трюк состоит в том, чтобы обернуть каждый из ваших <span> с помощью соответствующего <div>. Таким образом, мы используем разрыв строки, вызванный <div> display: block (по умолчанию), сохраняя при этом визуальный зеленый ящик до пределов текста (с объявлением display: inline-block).

.text span {
   background:rgba(165, 220, 79, 0.8);
   display:inline-block;
   padding:7px 10px;
   color:white;
}
.large {  font-size:80px }

<div class="text">
  <div><span class="medium">We</span></div>
  <div><span class="large">build</span></div>
  <div><span class="medium">the</span></div>
  <div><span class="large">Internet</span></div>
</div>