11

我试图在一个 div 中包含一个包含大约 500 多个字符的单词。

<table><tr><td style="width: 100px;" colspan=""><div class="wordwrap"><p>
dwhjifuidfinrnvfrvgjsrfjoejwofjjfpijqfpqejospjfcjcdefjipwejpfjespfjweokpwoefweeeepWSPgjwrqeo[fj[ejwo[jfqjfo[cfj[e[awfjw[fw[ofj[sejfpjwerpjfpwrjgjrjghyhefdjsjflkfasjgfiosdjfgsfgsdfiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiigrwewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewettttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttu
</p></div> </td></tr></table>

使用提供的这个解决方案有没有办法在 div 中自动换行长单词？

<style type="text/css">
 .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 */
}
 </style>

但它不起作用。遵循这个当使用'all one word'时有没有办法包装html文本？还 。可能是什么问题呢？

4

7 回答 7

24

因为你的长词在一个<table>- 你需要添加table-layout: fixed;

table { 
   width: 100%; 
   word-wrap:break-word;
   table-layout: fixed;
}


table { 
   width: 100%; 
   word-wrap:break-word;
   table-layout: fixed;
}
<table ><tr><td style="width: 100px;" colspan=""><div class="wordwrap"><p>
dwhjifuidfinrnvfrvgjsrfjoejwofjjfpijqfpqejospjfcjcdefjipwejpfjespfjweokpwoefweeeepWSPgjwrqeo[fj[ejwo[jfqjfo[cfj[e[awfjw[fw[ofj[sejfpjwerpjfpwrjgjrjghyhefdjsjflkfasjgfiosdjfgsfgsdfiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiigrwewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewettttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttu

</p></div> </td></tr></table>

小提琴

解释：

的默认值table-layout是auto这意味着浏览器将根据表格单元格的内容来决定列的宽度。

在这种情况下，表格布局算法将查看那个非常长的单词并说：“哎呀，我需要一个非常宽的列来容纳那个单词”

通过设置table-layout为- 浏览器根据第一行fixed中单元格的宽度确定列的宽度，而不考虑其他行中存在的内容量。（见MDN）

在这里，一行有一个单元格 - 所以table-layout: fixed说：使该单元格成为整个表格的宽度！（曾经有width: 100%）

注意：要table-layout: fixed生效，必须设置表格的宽度（使用除 以外的值auto）

有关更多详细信息table-layout- 请参阅本文

于 2013-08-14T10:41:05.780 回答
6

word-wrap: break-word应该给你你想要的结果。

于 2013-08-14T10:35:20.580 回答
6

这是您应该使用的代码：

.wrapword {
  width: 200px;
  -ms-word-break: break-all;
  word-break: break-all;
  white-space: pre-wrap
}
<div class="wrapword">
  dswfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfug
</div>

于 2019-07-08T13:24:24.693 回答
2

您还拥有 HTML5 的<wbr>标签：http ://www.quackit.com/html_5/tags/html_wbr_tag.cfm ，它可以让您指定合适的断点

dwhjifuidfinrnvfrvgjsrfjoejwofjjfpijqfpqej<wbr>ospjfcjcdefjipwejpfjespfjweokpwoefweeeepWSPgjwrqeo

它可能不是你想要的，但值得一玩

于 2013-08-14T10:45:07.260 回答
1

css中有属性：

.selector {
    word-wrap: normal|break-word;
}
于 2013-08-14T10:35:35.267 回答
0

尝试添加一些overflow- hidden, scroll, auto...

 .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 */
   overflow:hidden;
}

您关注的答案也包含oveflow: scroll;

于 2013-08-14T10:35:38.300 回答
-2

尝试这个。它对我有用。

<html>
<head></head>
<body>
  <div style="width:200px;">
    <span style="width:100%;table-layout:fixed;word-wrap:break-word;display:inline-table">
      hadfskldfjsdjlfjlsdkflkdsfsdrfsdfsdfsfsdfsdfsdfsdfsdfsd
    </span>
  <div>
</body>
</html>
于 2015-08-06T14:56:09.913 回答