В настоящий момент TEST TEST появляются рядом. Как я могу надавить на вторую строку? Только через CSS.Закрепление слов в CSS
<div id="box"><p>TEST TEST</p></div>
#box{
height: 50px;
text-align: center;
position: relative;
margin: 0 auto;
background-color: red;
color: white;
display: inline-block;
padding-left: 5px;
padding-right: 5px;
}
<html><head>
<style>
#box {
width:5px;
display:table;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
</style></head>
<body>
<div id="box">TEST TEST</div>
</body>
</html>
Это изменяет ширину 'div'. Если это приемлемо, вам не понадобится все остальное, и он не должен его использовать. –
Просто добавьте, например. 'width: 3em' в правило CSS в вопросе, и TEST TEST появляется в двух строках (уродливо, но это то, что делают другие части кода). –
Вы правы, это работает, мне нужно исследовать немного больше. Но везде то, что я написал, соблюдается. – Amit
Простой, просто поставить TEST < «бр /> TEST только через CSS это не возможно, если у вас есть два подконтейнеров, по одному для каждого "TEST".
Вам необходимо установить width элемента div. Элементы автоматически перейдут на новую строку.
#box{
width:20px; /* or a suitable width*/
height: 50px;
text-align: center;
position: relative;
margin: 0 auto;
background-color: red;
color: white;
display: inline-block;
padding-left: 5px;
padding-right: 5px;
}
Обратите внимание, что высота зависит от содержания. Если есть выделение контента, высота элемента также увеличивается.
И alernative подход установить межсловную для родительских контейнера с большим количеством, например,
.parent {
word-spacing:;
}
Это также заставит перенос слов после каждого слова.
Установка ширина элемента автоматически разбивает текст внутри элемента
Существует также возможность разбить слово, это может быть сделано с
автопереноса слов: брейк-слов;
Предполагая, что вы пытаетесь сделать элемент всегда показывать одно слово в строке, вы можете использовать CSS word-spacing свойства.
#box {
word-spacing: 30000px;
}
32767px на Chrome 29.0.1 и бесконечных значений на FF23), и он будет работать точно так же. Таким образом, он не будет связан с шириной контейнера.Я буду делать что-то вроде этого.
<h4>lorem ipsum
<span class="wrap-text">
dolor site amet
</span>
</h4>
.wrap-text{
white-space: pre-line;
}
Не знаете, почему в одном из приведенных выше предложений используется предварительная упаковка. Я думаю, что предварительная линия будет лучшей. Он будет игнорировать все пробелы и вкладки, но почитать твердые возвращения в исходном коде.
Так что в вашем коде, для мест, которые вы хотите перевернуть на вторую строку, выполните жесткий возврат.
Мне нравится помещать класс span, потому что с его помощью вы можете сделать его отзывчивым, только инициировать обертывание при определенных размерах видового экрана.например: @media (макс-ширина: 768px)
Я использую этот CSS стиль:
.dont-break-out {
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}<div style="width: 500px;" class="dont-break-out">ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
хорошо, что автоматически произойдет, как только вы указываете 'width' из ваших 'div' - в противном случае, почему он не должен находиться в одной строке;) – olydis
что именно вы пытаетесь сделать? – Itay
Вы не можете этого сделать. Вы можете установить ширину элемента настолько узкой, что в каждую строку вставляется только одно слово. Но это не является принудительным прерыванием строки после каждого слова. – feeela