【问题标题】:Word-wrap: break-word does not work with a very long word combined with width: 100%自动换行:断词不适用于与宽度相结合的非常长的单词:100%
【发布时间】:2017-03-02 17:17:38
【问题描述】:

为什么它在这个小提琴https://jsfiddle.net/0h1wbju0/ my 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;
}

【问题讨论】:

  • word-break: break-word
  • @CBroe 你的意思是word-break: break-all
  • 你说得对,我实施了链接问题中概述的修复程序,它解决了我的问题。谢谢!
  • 我必须向@CBroe 和@Bryan 提及word-break: break-word 可以在Chrome 上运行,但不能在Firefox 上运行。

标签: html css


【解决方案1】:

你应该使用 =>

`word-break: break-all;`

Working code jsfiddle

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-02-14
    • 2023-03-25
    • 2017-03-24
    • 1970-01-01
    • 2017-06-05
    相关资源
    最近更新 更多