Opera nowrap запретить перенос строк, div ...
Есть простая конструкция:
<style> .item { display: block; width: 100px; height: 100px; overflow: hidden; border: 1px solid black; } .plus { display: block; float: left; height: 17px; width: 17px; border: 1px solid blue; } .title { white-space: nowrap; } </style> <div class="item"> <div class="plus"></div><div class="title">Длинный Заголовок</div> </div> Существует ли железобетонный способ(кроме таблицы) запретить Opera переносить div.title на следующую строку если заголовок не влезает в div.item. Проблема только в Opera, у остальных браузеров всё ок. Через js я могу изменить div.item в зависимости от вычисления длины div.title, но хочется через CSS. |
абсолютное позиционирование + отступ слева равный ширине .plus.
другие варианты как-то не приходят в голову. |
T-sh, тогда Длинный заголовок поломает верстку и вылезет поверх родителя -> div.item.
<style> .item { display: block; width: 100px; height: 100px; overflow: hidden; border: 1px solid black; } .plus { display: block; float: left; height: 17px; width: 17px; border: 1px solid blue; } .title { position: absolute; padding-left: 17px; white-space: nowrap; } </style> <div class="item"> <div class="plus"></div><div class="title">Длинный Заголовок</div> </div> |
Gozar, надо плюс позиционировать.
<style> .item { display: block; width: 100px; height: 100px; overflow: hidden; border: 1px solid black; position: relative; } .plus { position: absolute; top: 0; left: 0; display: block; float: left; height: 17px; width: 17px; border: 1px solid blue; } .title { padding-left: 17px; white-space: nowrap; } </style> <div class="item"> <div class="plus"></div><div class="title">Длинный Заголовок</div> </div> |
nasqad,
|
B@rmaley.e><e,
Та же проблема. Чуть лучше, но всё же overflow: auto; div.title style background-color не на всю ширину <style> .item { display: block; width: 100px; height: 100px; overflow: auto; border: 1px solid black; position: relative; } .plus { position: absolute; top: 0; left: 0; display: block; float: left; height: 17px; width: 17px; border: 1px solid blue; } .title { padding-left: 17px; white-space: nowrap; background-color: #4D70CE; } </style> <div class="item"> <div class="plus"></div><div class="title">Длинный Заголовок</div> </div> |
nasqad,
overflow: auto поставь. Я возможно опечатался в первом посте. Не придал значения, думал что так будет доходчивей, но всё равно твоё решение не работает. Или сделай как B@rmaley.e><e, чтобы можно было посмотреть как оно работает. |
Gozar, так это уже проблема исходного варианта, причём оно так во всех браузерах (проверил, правда, я только Хромиум)
<style> .item { display: block; width: 100px; height: 100px; overflow: auto; border: 1px solid black; } .plus { display: block; float: left; height: 17px; width: 17px; border: 1px solid blue; } .title { background: red; white-space: nowrap; } </style> <div class="item"> <div class="plus"></div><div class="title">Длинный Заголовок</div> </div> |
Цитата:
Почему же тогда текст не обрезается по ширине родительского блока? |
Цитата:
Цитата:
|
Часовой пояс GMT +3, время: 01:37. |