问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

word-wrap break-word 在此示例中不起作用

社区维基
1
新手上路，请多包涵

我无法让自动换行处理这个例子……

 <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 中工作。谢谢。

编辑：在 Chrome 19 和 Firefox 12 中失败，它在 IE8 中有效。我试过 doctype strict 和 transitional，都没有用。

原文由 b10hazard 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcss
阅读 964
2 个回答
得票最新
社区维基
1
✓ 已被采纳

Mozilla Firefox 解决方案

添加：

 display: inline-block;

到你的风格 td 。

基于 Webkit 的浏览器（ Google Chrome ， Safari ，…）解决方案

添加：

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

到你的风格 td 。

注意：请 注意，就目前而言， break-word 不是 webkit 标准规范的一部分；因此，您可能有兴趣 break-all 。这个替代值无疑提供了一个彻底的解决方案；但是，它符合标准。

歌剧 解决方案

添加：

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

到你的风格 td 。

上一段以类似的方式适用于 Opera。

原文由 Stencil 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

Word-Break 与 inline-block 无关。

确保指定 width 并注意父节点中是否有任何覆盖属性。确保没有 white-space: nowrap 。

看到 这个 codepen

 <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>

原文由 Farshid Ashouri 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题