Opera nowrap запретить перенос строк, div ...

[Gozar]

Есть простая конструкция:

<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.

[T-sh]

абсолютное позиционирование + отступ слева равный ширине .plus.

другие варианты как-то не приходят в голову.

[Gozar]

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>

[B@rmaley.e><e]

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>

[Gozar]

nasqad,
Хм, работает. Не догоняю почему, но работает. Только дива background-color: в 1%, а это нехорошо.

[Gozar]

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>

[Gozar]

nasqad,
overflow: auto поставь. Я возможно опечатался в первом посте. Не придал значения, думал что так будет доходчивей, но всё равно твоё решение не работает. Или сделай как B@rmaley.e><e, чтобы можно было посмотреть как оно работает.

[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>

[Gozar]

Gozar, так это уже проблема исходного варианта

Нет, это не проблема исходного варианта. Если ты собираешь машину на 4 колесах, а тебе говорят что колеса есть только 3, то это не проблема исходного варианта.

Почему же тогда текст не обрезается по ширине родительского блока?

[B@rmaley.e><e]

Причина: еще ни разу run у меня не заработал

Надо использовать тег [html]

Если ты собираешь машину на 4 колесах, а тебе говорят что колеса есть только 3, то это не проблема исходного варианта.

Если после добавления нового недостающего колеса салон оказался синим, вероятно, он таким и был.