使用CSS包装一个长单词

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

In提供的这个解决方案有没有办法在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>

但它不起作用。下面是当'；所有一个单词'；是否使用？而且可能是什么问题？

因为您的长单词在<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的更多详细信息，请参阅本文

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

以下是您应该使用的代码：

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

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

您还获得了HTML5的<wbr>标记：http://www.quackit.com/html_5/tags/html_wbr_tag.cfm它允许您指定合适的断点

dwhjifuidfinrnvfrvgjsrfjoejwofjjfpijqfpqej<wbr>ospjfcjcdefjipwejpfjespfjweokpwoefweeeepWSPgjwrqeo

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

css中有属性：

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

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

试试这个。它对我有效。

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

说明：

相关内容

最新更新

热门标签：