содержание сила DIV не обернуть

Question

У меня есть DIV определяется таким образом:

<div id="divContent" class="content" style="margin-left:239px;min-height: 100%; padding: 130px 80px 30px 80px; overflow: hidden;"> 

Содержание DIV сложны и разнообразны, в том числе множество различных HTML и CSS. Все, что я хочу, это заставить содержимое div NOT обернуть, так что при перетаскивании правого края окна браузера влево к левому краю содержимое может исчезнуть с правой стороны, но никогда не будет завершено.

Я уже пробовал применять этот CSS на divContent DIV, а также на суб-дивы внутри divContent, но ничего не сделал:

white-space: nowrap 

Какие у меня есть варианты?

< < EDIT >>

Вот фактический web page.

Вот как это выглядит (правильно), прежде чем сделать страницы меньше:

Вот как это выглядит (ошибочно) после создания страницы меньше, и он начинает оборачивать:

Answer 1

Добавление стиля overflow:hidden к стилю элемента приведет к выходу любого текста, который вытечет из div. вы должны удалить его и заменить его white-space:nowrap

<div id="divContent" class="content" 
    style="margin-left:239px;min-height: 100%; 
      padding: 130px 80px 30px 80px; white-space:nowrap;"> 

Answer 2

Вы должны установить ширину до размера вы хотите, чтобы ДИВ быть, в РХ единицах, например:

... width: 500px; ... 

Затем, если экран становится более узким, при этом div будет исчезать справа от экрана, независимо от настройки переполнения. Это часто помогает в таких проблемах, чтобы временно предоставить все границы div, например: border 1px solid red; так что вы можете видеть, что происходит.

Переполнение происходит только в том случае, если вы исправляете как ширину, так и высоту div, а текст слишком длинный, чтобы вписаться в это поле - он будет затем распределяться ниже div. Белое пространство выглядит так, как будто оно работает, потому что оно заставляет текст придерживаться одной строки, пока вы не дадите div границе и не поймете, что div по-прежнему заканчивается на краю экрана (сколь бы широким он ни был в любой момент) и текст теперь выходит за пределы div (который вы можете увидеть, добавили ли вы границу и удалили переполнение).

Так фиксируя по ширине и высоте, если все сделано правильно, должно работать (я использовал 500px, но изменить это все, что вы хотите):

<div id="divContent" class="content" style="width: 500px; margin-left:239px;min-height: 100%; padding: 130px 80px 30px 80px; overflow: hidden;"> 

Однако многое зависит от того, какое содержание вы иметь в своем div и какие у них есть CSS, поэтому, если фиксация такой ширины не работает, сообщите нам об этом, пожалуйста.

Answer 3

Хорошо, спасибо за добавление ссылки на код. Мой, у тебя есть много вещей в этом div? (Это всегда помогает дать полную картину с вопросом!) И в этом проблема - особенно пары полей метки/ввода. Они находятся внутри элементов dd, которые находятся внутри div с class = column-thirds.Это имеет процентную ширину, что означает, что они сжимаются при сжимании окна.

Но нет ничего, чтобы остановить ввод полей ввода под их метками, поскольку столбцы сокращаются в ширину. Так вот что вам нужно остановить. Добавление Nowrap их содержащих элементы (элементы DD), и ширина, а также для остановки метки и поля, выходящей из конца элемента DD, должно делать это:

dd { 
    white-space: nowrap; 
    width : 400px; /* choose your width here to be wider than the label + field */ 
} 

, чтобы остановить эти элементы упаковки. (И проверьте, нет ли свойства float на ярлыках или полях ввода, что также может быть частью проблемы).

[далее править]

К сожалению, ваша установка довольно сложна. Таким образом, чтобы показать решение Nowrap в основном правильно: сделать небольшой тест, с помощью банковской страницы, содержащей только один из ваших меток полого пара:

<dl><dd> 
    <label for="txtFirstName" id="lblFirstName" title="First Name" data-required="true">First Name</label> 
    <input name="txtFirstName" type="text" value="Frankie8" id="txtFirstName" data-capture="DLFirstName" style="width:131px" /> 
</dd></dl> 

и некоторые CSS:

dd { 
    margin-left: 400px; 
    border:2px solid black; 
    white-space: nowrap; 
} 

Затем сузить окно пока поле правого окна не перекрывает поле, а затем закомментируйте линию белого пространства; вы увидите, что поле выпадало под меткой. (Я пробовал, работает, как и ожидалось). Надеюсь, это показывает, что основная проблема для решения.

Однако, просматривая ваши файлы CSS, я вижу, что у вас есть медиа-запрос в файле LESS Style.less (см. @media вокруг строки 1976), который переопределяет метки как элементы блока, используя display: block. Это останавливает работу вышеупомянутого решения nowrap. Ярлыки обычно являются встроенными элементами. Поэтому либо вы должны быть в состоянии избавиться от этого изменения дисплея, если сможете, или найти другое решение.

Альтернативным решением было бы предоставить содержащиеся divs (class = column-thirds ones), минимальную ширину, чтобы они не уменьшались, поскольку они в первую очередь вызывают проблему с упаковкой. Единственное, что я могу придумать, - это плавать этикетки, но я не хотел бы делать ставки, как это получится.

Надеюсь, это поможет вам найти подходящее решение проблемы.