Как сломать длинное слово внутри div, основываясь на ширине родителя div?
Я хочу обернуть длинное слово внутри div, которое передает границу родителя div в новую строку.
Я пробовал решение .wordwrap
из этого Принятого ответа, но это не решает проблему.
Вот что я пробовал:
#parent {
width: 500px;
height: 500px;
border: solid 1px;
position: relative;
}
#child {
top: 20px;
left: 300px;
border: solid 1px;
position: absolute;
}
.wordwrap {
white-space: pre-wrap;
/* CSS3 */
white-space: -moz-pre-wrap;
/* Firefox */
white-space: -pre-wrap;
/* Opera <7 */
white-space: -o-pre-wrap;
/* Opera 7 */
word-wrap: break-word;
/* IE */
}
<div id="parent">
<div id="child" class="wordwrap">
asfasfafafsafafasfasfafafasfadvaavasdvavdvsavsvasvsvs
</div>
</div>
Ответы
Ответ 1
Вам не нужны все те white-space
Вместо этого используйте
.wordwrap {
word-break : break-all;
}
#parent {
width: 500px;
height: 500px;
border: solid 1px;
position: relative;
}
#child {
top: 20px;
left: 300px;
border: solid 1px;
position: absolute;
}
.wordwrap {
word-break: break-all;
}
<div id="parent">
<div id="child" class="wordwrap">
asfasfafafsafafasfasfafafasfadvaavasdvavdvsavsvasvsvs
</div>
</div>
Ответ 2
Элемент, в который вы помещаете текст, имеет position: absolute. Существует несколько вещей, которые вы должны знать при использовании позиции: абсолютный в элементе:
-
По умолчанию будет уважать только ширину и высоту содержимого с позицией, отличной от абсолютной/фиксированной.
-
Он не будет потреблять пространство в родительском элементе, поэтому его структурный размер родительского элемента никогда не будет затронут.
-
Вы можете привязать элемент с позицией: absolute в ближайшем родителе с другой позицией, чем по умолчанию (статический), с свойствами css (сверху, вправо, снизу, слева).
Следовательно, вы должны либо удалить позицию абсолютного из этого элемента, либо, поскольку вы уже используете свойство left, также определить свойство права (т.е. right: 0;)
SNIPPET
#parent {
width: 500px;
height: 500px;
border: solid 1px;
position: relative;
}
#child {
position: absolute;
top: 20px;
right: 0;
left: 300px;
border: solid 1px;
}
.wordwrap {
white-space: pre-wrap;
/* CSS3 */
white-space: -moz-pre-wrap;
/* Firefox */
white-space: -pre-wrap;
/* Opera <7 */
white-space: -o-pre-wrap;
/* Opera 7 */
word-wrap: break-word
/* IE */
}
<div id="parent">
<div id="child" class="wordwrap">
Pneumonoultramicroscopicsilicovolcanoconiosis...
</div>
</div>
Ответ 3
Вместо абсолютного позиционирования вы можете попробовать margin
. Пример ниже.
Обновлена скрипка
#parent {
width: 500px;
height: 500px;
border: solid 1px;
position: relative;
}
#child {
margin-top: 20px;
margin-left: 300px;
border: solid 1px;
}
.wordwrap {
white-space: pre-wrap;
/* CSS3 */
white-space: -moz-pre-wrap;
/* Firefox */
white-space: -pre-wrap;
/* Opera <7 */
white-space: -o-pre-wrap;
/* Opera 7 */
word-wrap: break-word;
/* IE */
}
<div id="parent">
<div id="child" class="wordwrap">
asfasfafafsafafasfasfafafasfadvaavasdvavdvsavsvasvsvs
</div>
</div>
Ответ 4
.wordwrap {
word-break : break-all;
}
Ответ 5
Вы должны добавить эти правила в свой CSS:
#parent {
overflow: hidden;
}
.wordwrap {
white-space: no-wrap;
text-overflow: ellipsis;
}
Приветствия
Ответ 6
вы можете попробовать этот код.
#parent {
width: 500px;
height: 500px;
border: solid 1px;
position: relative;
}
#child {
margin-top: 20px;
margin-left: 300px;
border: solid 1px;
}
.word-wrap {
white-space: pre-wrap;
word-wrap: break-word;
}
<body>
<div id="parent">
<div id="child" class="word-wrap">
GOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOD!
</div>
</div>
</body>