Получение поведения желаемого мин-ширина/линия Упаковочное

Question

Что я должен сделать, чтобы получить <div>, содержащий переменную текст Behaving следующим образом:

• ширина всегда по крайней мере 400px;
• слова не разбиты по линиям, но линии могут быть разбиты на границах слов;
• текст никогда не переполняет границу div, т. Е. Ширина растягивается для размещения контента, такого как очень длинные слова;
• ширина ровно 400 пикселей, когда это возможно. В частности, если есть длинный абзац с короткими словами, ширина должна быть ровно 400 пикселей.

Ближайший я получил, используя display: inline-block; min-width: 400px;, но длинные абзацы с короткими словами по-прежнему растягивают ширину.

Answer 1

Вы хотите сказать, что вы хотите, чтобы ваши div вести себя как таблица/таблица-ячейка.

Это должно соответствовать всем вашим заявленным требованиям:

.box { 
    width: 400px; 
    display: inline-table; /* table|inline-table|table-cell */ 
    word-wrap: normal; 
} 

Демо: https://jsfiddle.net/cqo9yupw/

Answer 2

Если вы не хотите, чтобы текст расширял вашу ширину DIV, вам нужно перейти с максимальной шириной.

Answer 3

Я предлагаю вам попробовать следующий CSS:

#container { 
    width:400px; 
} 


@media screen and (min-width:401px) { 

    #container { 
     width:auto; 
    } 
} 


@media screen and (max-width:399px) { 

    #container { 
     width:auto; 
    } 
} 

DIV с идентификатором «контейнер» следует использовать, чтобы инкапсулировать все части вашей страницы. Эта ширина установлена ​​на 400 пикселей. Теперь, когда пользователь увеличивает или уменьшает масштаб, ширина автоматически настраивается на окно пользователя. Поместите идентификатор для абзаца (ов), который у вас есть в разделах @media, и они также должны автоматически настраиваться.

Например: @media экран и (мин-ширина: 401px) {

#container { 
    width:auto; 
} 


} 


@media screen and (max-width:399px) { 

#container { 
    width:auto; 
} 

#paragraph { 
    width:auto; 
} 
} 

Answer 4

Try рядный стол вместо:

.mydiv{ 
    display:inline-table; 
    width:400px; 
    border:1px solid red; 
    word-wrap:normal; 
    word-break:keep-all; 
}