Question

我试图在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>

在Is there a way to word-wrap long words in a 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>

但它不起作用。也跟着这个Is there any way to wrap html text when 'all one word' is used?。可能是什么问题？

Answer 1

因为您的长词在<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>

<强> FIDDLE

说明：

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

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

中的单词

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

这里有一行有一个单元格 - 所以table-layout: fixed说：让那个单元格成为整个表格的宽度！（有width: 100%）

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

有关table-layout的详细信息 - 请参阅this article

Answer 2

word-wrap: break-word应该会为您提供您所追求的结果。

Answer 3

css中有属性：

.selector {
    word-wrap: normal|break-word;
}

Answer 4

您还获得了HTML5的<wbr>代码：http://www.quackit.com/html_5/tags/html_wbr_tag.cfm，可让您指定合适的分数点

dwhjifuidfinrnvfrvgjsrfjoejwofjjfpijqfpqej<wbr>ospjfcjcdefjipwejpfjespfjweokpwoefweeeepWSPgjwrqeo

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

Answer 5

尝试添加一些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;

Answer 6

这是您应该使用的代码：

.wrapword {
  width: 200px;
  -ms-word-break: break-all;
  word-break: break-all;
  white-space: pre-wrap
}

<div class="wrapword">
  dswfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfug
</div>

Answer 7

试试这个。它对我有用。

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

用CSS包装一个长单词

7 个答案:

说明：