Как отобразить пользовательский текст в новой строке?

Question

Я хочу показать текст «Вы экономите ...» в новой строке. Я не знаю, как это сделать. Пожалуйста, направляйте меня. Пожалуйста, нажмите для получения более подробной информации jsfiddle code

<div class="product-wrap first"> 
 
    <div class="item"> 
 
    <div class="product-image"><a href="#">Img area</a> 
 

 
    </div> 
 
    <div class="product-content"> 
 
     <div class="product-name"> <a class="fontcolor" href="#">Motorcycle Leather Boots (4Riders Boots Always)</a> 
 

 
     </div> 
 
     <div class="price-box"> 
 
     <p class="special-price"><span class="price" id="product-price-77">£53.68</span> 
 
     </p> 
 
     <p class="old-price"><span class="price" id="old-price-77">£84.15</span> 
 
     </p> <span class="div-discount"><b>You save </b> <em><i>36.21</i><u>%</u></em></span> 
 

 
     </div> 
 
     <div class="clr"></div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

span.div-discount { 
 
    /* display: block; */ 
 
    clear: left; 
 
    display: block; 
 
}

просто добавьте в ваш CSS будет работать

здесь демо пожалуйста, обратите внимание

DEMO

Answer 2

использование Сделать из <br/> тега здесь! Он ломает линию

DEMO

---

UPDATE

Добавить ниже свойства для вашего .product-wrap .item .price-box класса css

DEMO

.product-wrap .item .price-box { 
    margin-top: 6px; 
    overflow: hidden; 
    width:auto; //Set this 
    float:left; //and keep it float left 
} 

Answer 3

Добавить Css

.div-discount b, .div-discount em{display:block;} 

Answer 4

Ваши абзацы настроены на плавание, что хорошо, но вам нужно очистить и обернуть его в div и установить, чтобы div блокировался, чтобы он расширил ширину заливки.

Затем вы хотите установить класс div-discount для блокировки.

CSS:

.amounts { 
    display: block; 
} 
.div-discount { 
    color: #b50016; 
    display: block; 
} 
.clr-both { 
    clear: both; 
} 

HTML:

<div class="amounts"> 
    <p class="special-price"><span class="price" id="product-price-77">£53.68</span> 
    </p> 
    <p class="old-price"><span class="price" id="old-price-77">£84.15</span> 
    </p> 
    <div class="clr-both"></div> 
</div> 
<span class="div-discount"><b>You save </b> <em><i>36.21</i><u>%</u> 

См jsFiddle

Answer 5

Элемент Ъ в HTML означает полужирный. Добавление правила в CSS определяет отображение в виде строки. Это означает, что элементы, которые имеют встроенные или встроенные свойства, будут показаны на одной строке. Поэтому, если мы хотим показать наш пользовательский текст в новой строке, мы должны изменить его стиль с помощью встроенного дисплея, чтобы отображать его как блок.

.div-discount b{ display:block;}