Question

我不能让 word- wrap 和这个例子一起工作...

<html>
<head></head>
<body>

<table style="table-layout:fixed;">
<tr>
<td style="word-wrap: break-word; width:100px;">ThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrap</td>
</tr>
</table>

</body></html>

我记得我读到,必须指定一个布局(我做到了这一点),但除此之外,我还不确定我必须做些什么才能使这一布局发挥作用。我真的希望这个布局能在Firefox工作。谢谢。

EDIT: Failed in Chrome 19 and Firefox 12, it works in IE8. I tried doctype strict and transitional, neither worked.

Answer 1

Mozilla Firefox solution

加:

display: inline-block;

您的 td 样式。

**Webkit based browsers (Google Chrome, Safari, ...) solution**

加:

display: inline-block;
word-break: break-word;

您的 td 样式。

Note: Mind that, as for now, break-word is not part of the standard specification for webkit; therefore, you might be interested in employing the break-all instead. This alternative value provides a undoubtedly drastic solution; however, it conforms to the standard.

Opera solution

加:

display: inline-block;
word-break: break-word;

您的 td 样式。

前一段以类似方式适用于歌剧院。

Answer 2

Word- Break 与 inline block 无关。

确保您指定 width 并通知父节点中是否有高于一切的属性。请确定没有 white- space: nowrap 。

见"https://codepen.io/ourway/pen/vYYdOay" rel="noreferrer" > this coppen

<html>

<head>
</head>

<body>
  <style scoped>
    .parent {
      width: 100vw;
    }

    p {
      border: 1px dashed black;
      padding: 1em;
      font-size: calc(0.6vw + 0.6em);
      direction: ltr;
      width: 30vw;
      margin:auto;
      text-align:justify;
      word-break: break-word;
      white-space: pre-line;
      overflow-wrap: break-word;
      -ms-word-break: break-word;
      word-break: break-word;
      -ms-hyphens: auto;
      -moz-hyphens: auto;
      -webkit-hyphens: auto;
      hyphens: auto;
    }


    }
  </style>
  <div class="parent">

    <p>
      Note: Mind that, as for now, break-word is not part of the standard specification for webkit; therefore, you might be interested in employing the break-all instead. This alternative value provides a undoubtedly drastic solution; however, it conforms to
      the standard.

    </p>

  </div>

</body>

</html>

Answer 3

使用此代码 (< a href=> https:// csss- tricks.com/ snippets/ css/ protect- long- urls- from- rebreak- off- container/" rel=" noreferr" > 从 cs- tricks 获取, 这将对所有浏览器有效。

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;

Answer 4

max-width: 100px;
white-space: break-spaces;

Answer 5

这些地产的组合帮助了我:

display: inline-block;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: normal;
line-break: strict;
hyphens: none;
-webkit-hyphens: none;
-moz-hyphens: none;

Answer 6

才能在不同的浏览器上使聪明的突破(bridge-brike-word)运作良好, 对我有效的是以下一套规则:

#elm {
    word-break:break-word; /* webkit/blink browsers */
    word-wrap:break-word; /* ie */
}
-moz-document url-prefix() {/* catch ff */
    #elm {
        word-break: break-all; /* in ff-  with no break-word we ll settle for break-all */
    }
}

Answer 7

该守则也在发挥作用:

<html>
<head></head>
<body>

<table style="table-layout:fixed;">
<tr>
<td style="word-break: break-all; width:100px;">ThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrap</td>
</tr>
</table>

</body></html>

Answer 8

word- wrap 属性使用 display: inline- block 来工作 :

display: inline-block;
word-wrap: break-word;
width: 100px;

Answer 9

inline-block is of no use in this scenario

溶解

word-break: normal|break-all|keep-all|break-word|initial|inherit;
Simple Answer to your doubt is Use above and make sure white-space: nowrap nowhere used.

更好地理解说明:

wword- wrap / overflow-wrap 用于打破容器外溢的单词
wordbreak 属性在线的结尾处折断所有单词,即使那些通常会包裹在另一条线上而不会溢出其容器的单词。
word- wrap 是历史和非标准属性。它已被重新命名为 overflow- wrap , 但仍是一个别名, 浏览器今后必须支持。许多浏览器( 特别是旧浏览器) 不支持 < code> overflow- wrap , 并要求 word- wrap 作为备份( 得到所有人的支持 ) 。
如果您想要取悦 W3C, 您应该考虑在 CSS 中同时使用两个组合。如果您不使用, 仅使用 < code> word- wrap 就可以了。

Answer 10

(b) 支持我的工作: " /强 " 。

                word-break: normal;
                line-break: strict;
                hyphens: none;

Answer 11

只要指定容器的宽度为100, 然后加入 display: block 。

<div class="parent"><span>dummy text dummy text dummy text dummy text </span></div>
.parent
{
width:100%;
display:block
}

Mozilla Firefox solution

Webkit based browsers (Google Chrome, Safari, ...) solution

Opera solution

友情链接

**Webkit based browsers (Google Chrome, Safari, ...) solution**