使用CSS包装长单词 [英] Wrap a long single word using CSS

问题描述

我试图在一个div中包装一个包含约500个以上字符的单词.

I tried to wrap a single word which contains around 500+ chars in a div.

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

但是它不起作用. 遵循此在那里还可以使用所有一个单词"时以任何方式包装html文本吗? 可能是什么问题?

But it is not working. Followed this Is there any way to wrap html text when 'all one word' is used? also . What could be the problem?

推荐答案

因为您的长字在<table>之内-您需要添加table-layout: fixed;

Because your long word is within a <table> - you need to add 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

FIDDLE

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

The default value for table-layout is auto which means that the browser will decide the width of a column based on the content of the table cells.

在这种情况下，表布局算法将查看那个很长的单词，然后说:哎呀，我需要一个很宽的列才能将该单词放入其中"

In this case, the table layout algorithm will look at that really long word and say: 'heck, i'll need a really wide column to fit that word in'

通过将table-layout设置为fixed-浏览器根据第一行中单元格的宽度确定列的宽度，而不考虑其他行中的内容量行. (请参见 MDN )

By setting table-layout to fixed - The browser determines the width of the columns based on the width of the cells in the first row without taking into account the amount of content present in other rows. (See MDN)

在这里，一行包含一个单元格-因此table-layout: fixed说:使该单元格成为整个表格的宽度！ (有width: 100%)

Here, there is one row with one cell - so table-layout: fixed says: make that cell the width of the entire table! (was has width: 100%)

注意事项:要使table-layout: fixed生效，必须设置表格的宽度(使用auto以外的值)

NB: For table-layout: fixed to take effect, the width of the table must be set (with a value other than auto)

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

For more details about table-layout - See this article

这篇关于使用CSS包装长单词的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！