Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Opera nowrap запретить перенос строк, div ... (https://javascript.ru/forum/xhtml-html-css/27390-opera-nowrap-zapretit-perenos-strok-div.html)

Gozar 11.04.2012 17:39

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.

T-sh 11.04.2012 17:59

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

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

Gozar 11.04.2012 18:29

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 11.04.2012 18:48

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 11.04.2012 18:51

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

Gozar 11.04.2012 19:09

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 11.04.2012 19:16

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

B@rmaley.e><e 11.04.2012 19:20

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 11.04.2012 19:30

Цитата:

Сообщение от B@rmaley.e><e (Сообщение 168417)
Gozar, так это уже проблема исходного варианта

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

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

B@rmaley.e><e 11.04.2012 20:11

Цитата:

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

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

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

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


Часовой пояс GMT +3, время: 18:31.