Как сломать длинное слово внутри 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>