表格单元格换行不能使用斜杠 [英] table-cell word-wrap not working with slashes

问题描述

这可以在不插入Javascript中的空格的情况下解决（纯CSS）？

jsfiddle：

http://jsfiddle.net/HgBhk/1/

 不工作：
< div style =display：table; width：170px; background-color：cyan;> 
< div style =display：table-row> 
< div style =display：table-cell; word-wrap：break-word;> abfdbfdbfdb / dfbfdbdfbfbf / bdffbdbfdfbddfbdfbdfb< / div> 
< div style =display：table-cell; width：34px; background-color：red;> xxxxx< / div> 
< / div> 
< / div> 
 
< / br> 
工作：
< div style =display：table; width：170px; background-color：cyan;> 
< div style =display：table-row> 
< div style =display：table-cell; word-wrap：break-word;> abfdbfdbfdb dfbfdbdfbfbf bdffbdbfdfbddfbdfbdfb< / div> 
< div style =display：table-cell; width：34px; background-color：red;> xxxxx< / div> 
< / div> 
< / div> 
  

解决方案

添加 table-layout：固定; 添加到表格div元素中，并为单元格分配一个宽度以使其成为分行：

I am trying to wrap text in a fixed layout but it doesn't work when the text contains slashes.

Can this be fixed without inserting spaces from Javascript (pure CSS)?

jsfiddle:

http://jsfiddle.net/HgBhk/1/

Not working:
<div style="display:table; width:170px; background-color:cyan;">
    <div style="display:table-row">
        <div style="display:table-cell;word-wrap: break-word;">abfdbfdbfdb/dfbfdbdfbfbf/bdffbdbfdfbddfbdfbdfb</div>
        <div style="display:table-cell; width:34px;  background-color:red;">xxxxx</div>        
    </div>
</div>

</br>
Working:
<div style="display:table; width:170px; background-color:cyan;">
    <div style="display:table-row">
        <div style="display:table-cell;word-wrap: break-word;">abfdbfdbfdb dfbfdbdfbfbf bdffbdbfdfbddfbdfbdfb</div>
        <div style="display:table-cell; width:34px;  background-color:red;">xxxxx</div>        
    </div>
</div>

解决方案

Add table-layout:fixed; to the "table" div-element and assign a width to the cell to make it break lines:

JSFiddle

这篇关于表格单元格换行不能使用斜杠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！