Перехід до нового рядка з вбудованим блоком?

Я хочу видалити <br />'s і зробити лінії розриву через 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 }

Скрипка

Видаліть усі brтеги та використовуйте display: table.

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

Пояснення: Таблиця за замовчуванням обертає ширину свого вмісту, не встановлюючи ширини, але все ще є елементом рівня блоку. Ви можете отримати таку ж поведінку, встановивши ширину для інших елементів рівня блоку:

<span style="display:block;border:1px solid red;width:100px;">Like a default table.</span>
<code>null</code>

Зверніть увагу, що <code>елемент не тече в рядку так, <span>як це було б зазвичай. Перевірте це за допомогою обчислених стилів у ваших інструментах розробника. Ви побачите псевдополе праворуч від <span>. У будь-якому випадку, це те саме, що і таблиця, але таблиця має додаткову перевагу, завжди формуючи ширину свого вмісту.

використовувати 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;
}

Встановіть елементи display: inlineта використовуйте :after:

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

і додайте клас у ваші html-інтервали:

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

Я думаю, що найкращий спосіб зробити це станом на 2018 рік - використовувати flexbox.

.text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* same as original below */
.text span {
   background:rgba(165, 220, 79, 0.8);
   display:inline-block;
   padding:7px 10px;
   color:white;
}
.fullscreen .large {  font-size:80px }

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

Ось ще одне рішення (перераховані лише відповідні декларації):

.text span {
   display:inline-block;
   margin-right:100%;
}

Коли поле виражається у відсотках, цей відсоток береться з ширини батьківського вузла, тому 100% означає ширину батьківського вузла, що призводить до того, що наступний елемент буде "висунутий" до нового рядка.

Я думаю, що плаваючі для вас тут можуть працювати найкраще, якщо ви не хочете, щоб елемент займав цілий рядок, плаваючий, що залишився, повинен працювати.

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

Примітка: Видаліть <br/>'s перед використанням цього курсу.

Якщо ви в порядку з тим, що не використовуєте <p>s (лише <div>s і <span>s), це рішення може навіть дозволити вам вирівняти ваш inline-blocks-центр або праворуч, якщо хочете (або просто тримати їх ліворуч, як ви спочатку просили). Незважаючи на те, що рішення все ще може працювати з <p>s, я не думаю, що отриманий HTML-код буде цілком правильним , але це все одно залежить від вас.

Фокус полягає в тому, щоб обернути кожну з ваших <span>s відповідними <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>

Ви можете спробувати:

    display: inline-table;

Для мене це чудово працює.