Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.04.2012, 17:39
Аватар для Gozar
Отправить личное сообщение для Gozar Посмотреть профиль Найти все сообщения от Gozar
 
Регистрация: 07.06.2007
Сообщений: 7,504

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.
__________________
Последний раз редактировалось Gozar, Сегодня в 24:14.
Ответить с цитированием
  #2 (permalink)  
Старый 11.04.2012, 17:59
Аватар для T-sh
Профессор
Отправить личное сообщение для T-sh Посмотреть профиль Найти все сообщения от T-sh
 
Регистрация: 04.12.2009
Сообщений: 579

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

другие варианты как-то не приходят в голову.
__________________
С моих слов записано верно.
Ответить с цитированием
  #3 (permalink)  
Старый 11.04.2012, 18:29
Аватар для Gozar
Отправить личное сообщение для Gozar Посмотреть профиль Найти все сообщения от Gozar
 
Регистрация: 07.06.2007
Сообщений: 7,504

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, Сегодня в 24:14.
Ответить с цитированием
  #4 (permalink)  
Старый 11.04.2012, 18:48
Аватар для B@rmaley.e><e
⊞ Развернуть
Отправить личное сообщение для B@rmaley.e><e Посмотреть профиль Найти все сообщения от B@rmaley.e><e
 
Регистрация: 11.01.2010
Сообщений: 1,810

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>
Ответить с цитированием
  #5 (permalink)  
Старый 11.04.2012, 18:51
Аватар для Gozar
Отправить личное сообщение для Gozar Посмотреть профиль Найти все сообщения от Gozar
 
Регистрация: 07.06.2007
Сообщений: 7,504

nasqad,
Хм, работает. Не догоняю почему, но работает. Только дива background-color: в 1%, а это нехорошо.
__________________
Последний раз редактировалось Gozar, Сегодня в 24:14.

Последний раз редактировалось Gozar, 11.04.2012 в 19:14.
Ответить с цитированием
  #6 (permalink)  
Старый 11.04.2012, 19:09
Аватар для Gozar
Отправить личное сообщение для Gozar Посмотреть профиль Найти все сообщения от Gozar
 
Регистрация: 07.06.2007
Сообщений: 7,504

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, Сегодня в 24:14.
Ответить с цитированием
  #7 (permalink)  
Старый 11.04.2012, 19:16
Аватар для Gozar
Отправить личное сообщение для Gozar Посмотреть профиль Найти все сообщения от Gozar
 
Регистрация: 07.06.2007
Сообщений: 7,504

nasqad,
overflow: auto поставь. Я возможно опечатался в первом посте. Не придал значения, думал что так будет доходчивей, но всё равно твоё решение не работает. Или сделай как B@rmaley.e><e, чтобы можно было посмотреть как оно работает.
__________________
Последний раз редактировалось Gozar, Сегодня в 24:14.
Ответить с цитированием
  #8 (permalink)  
Старый 11.04.2012, 19:20
Аватар для B@rmaley.e><e
⊞ Развернуть
Отправить личное сообщение для B@rmaley.e><e Посмотреть профиль Найти все сообщения от B@rmaley.e><e
 
Регистрация: 11.01.2010
Сообщений: 1,810

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>

Последний раз редактировалось B@rmaley.e><e, 11.04.2012 в 19:24.
Ответить с цитированием
  #9 (permalink)  
Старый 11.04.2012, 19:30
Аватар для Gozar
Отправить личное сообщение для Gozar Посмотреть профиль Найти все сообщения от Gozar
 
Регистрация: 07.06.2007
Сообщений: 7,504

Сообщение от B@rmaley.e><e Посмотреть сообщение
Gozar, так это уже проблема исходного варианта
Нет, это не проблема исходного варианта. Если ты собираешь машину на 4 колесах, а тебе говорят что колеса есть только 3, то это не проблема исходного варианта.

Почему же тогда текст не обрезается по ширине родительского блока?
__________________
Последний раз редактировалось Gozar, Сегодня в 24:14.

Последний раз редактировалось Gozar, 11.04.2012 в 19:33.
Ответить с цитированием
  #10 (permalink)  
Старый 11.04.2012, 20:11
Аватар для B@rmaley.e><e
⊞ Развернуть
Отправить личное сообщение для B@rmaley.e><e Посмотреть профиль Найти все сообщения от B@rmaley.e><e
 
Регистрация: 11.01.2010
Сообщений: 1,810

Сообщение от nasqad
Причина: еще ни разу run у меня не заработал
Надо использовать тег [html]
Сообщение от Gozar
Если ты собираешь машину на 4 колесах, а тебе говорят что колеса есть только 3, то это не проблема исходного варианта.
Если после добавления нового недостающего колеса салон оказался синим, вероятно, он таким и был.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как железно запретить перенос элемента на новую строку? constantant (X)HTML/CSS 6 14.08.2009 01:59