Помогите разобраться с CSS

[Ch0oJoy]

Здравствуйте! Решил поменять стиль .box .box-heading , но столкнулся с небольшой проблемой. Не получается прикрепить border к тексту. При width: 100%; рамка растягивается на всю ширину блока.

 

Подскажите как сделать чтоб рамка была вокруг текста и при длинном названии растягивалась вместе с текстом и не переносила текст на другую строку.

background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 8px;
    color: #4D4D4D;
    font-family: arial;
    font-size: 16px;
    font-weight: bold;
    margin: 0 auto -15px;
    display: block;
    padding: 3px 6px;
    position: relative;
    text-align: center;
    width: 180px;
    z-index: 2;

P.s. если ставлю width: 180px; то текст переносится, увеличиваю 180px - увеличивается рамка и в боковых блоках выпирает.

 

[AlexDW]

в данном случае от ссылки на сайт пользы для ответа будет больше, чем от куска кода

 

насчет переноса строки - перенос-то можно запретить, но нужно учесть, как этот текст будет выглядеть на маленьких экранах

если текст получится больше экрана - верстка при запрете слетит

[Ch0oJoy]

в данном случае от ссылки на сайт пользы для ответа будет больше, чем от куска кода

 

насчет переноса строки - перенос-то можно запретить, но нужно учесть, как этот текст будет выглядеть на маленьких экранах

если текст получится больше экрана - верстка при запрете слетит

Ссылку сбросил Вам в лс. 

 

У меня не адаптивный шаблон, проблем с переносом не должно быть (как я понимаю). 

 

Хотелось бы чтоб один стиль за это отвечал, а так-то можно создать несколько стилей и обернуть проблемные места, каждое в свой стиль.

[AlexDW]

не нужно в лс, лс для другого

пишите здесь, при коллективном участии больше шансов на решение

[Ch0oJoy]

не нужно в лс, лс для другого

пишите здесь, при коллективном участии больше шансов на решение

Хорошо :-)  Вот ссылка на сайт. 

http://alishop.kiev.ua/

[AlexDW]

не понял насчет переноса - у вас и так сейчас текст в одну строку

[Ch0oJoy]

не понял насчет переноса - у вас и так сейчас текст в одну строку

 

Сейчас не переносится потому что я растянул рамку( width: 60%;), на скрине видно что поля ее очень далеко. Но если зайти на страницу товара, то в левом блоке такого разрешения(60%) мало и срабатывает перенос строки.

 

Хотелось бы уменьшить левый/правый отступ на главной, но в тоже время увеличить в блоке, чтоб избавится от переноса :-)

Змінено 1 квітня 2016 користувачем Ch0oJoy

[AlexDW]

использовать в .box .box-heading

white-space: nowrap;

 

но как уже писал - при большой длине текста, он выйдет за границы

[Ch0oJoy]

использовать в .box .box-heading

white-space: nowrap;

 

но как уже писал - при большой длине текста, он выйдет за границы

 

Попробовал, текст во многих местах выходит за границы.

 

На данный момент сделал широкую рамку, буду еще что-то пробовать.

 

Спасибо большое за помощь!