html - 自动换行 : break-word does not work with a very long word combined with width: 100%

Question

为什么在这个 fiddle 里 https://jsfiddle.net/0h1wbju0/我的 word-wrap: break word and width: 100% 没有被尊重，长词没有被分解成多行以适应它的父 div？谢谢!

HTML:

    <div class="first_div">
        <fieldset class="fieldset_description"><label>Description</label>
            <div data-id="description"> fdsjalllffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</div>
        </fieldset>
    </div>

CSS:

.first_div {
  width: 200px;
}

.fieldset_description {
  max-width: 100%;
  word-wrap: break-word;
}

.description {
  max-width: 100%;
  word-wrap: break-word;
}

Answer 1

你应该使用=>

`word-break: break-all;`

Working code jsfiddle