我们知道世界上主要有两种文字：一种是以中文为代表的象形文字；一种是以中文为代表的象形文字；另一种是以英语、法语和俄语为代表的拼音语言。前者的换行很简单，每个词都有自己的意思，所以可以在每个词后面做一个换行。在拼音语言中，字母的组合本身是没有意义的，只有当它们连在一起时才有意义；不同词的意义巨大，只能以词为单位断线。web开发中，屏幕宽度有限，超长文本必须换行。在CSS中，控制换行的属性主要有word-break和white-space。其中，默认的换行行为是word-break:normal，即以单词为单位换行。奇怪的是，对于URL，我认为/.:?&之类的东西是一个明显的单词分隔符，应该换行，但实际上，浏览器不会在这些地方换行。如果我们使用break-all或者break-word，浏览器会在不合理的地方断行。如果它恰好在表格中并且还有很多其他列，则包含URL的单元格将被挤压得很窄，拉得很高，非常难看，很难阅读。尝试native方法也解决不了问题，只好摸索手动断线的方法。但是要完美解决这个问题是非常困难的：第一种解决办法是把所有的行都换行，这是肯定不行的；第二种方案是固定宽度的换行，因为表格的内容不固定，效果也很差，也行不通；老板提出了第三种解决方案：使用“8.3”格式，即只保留超长字符串的前8个字符，后面是“...”，可以手动扩展。显然，这种方案对URL的价值不大。https://加起来恰好是8个字符。有意义吗……即使再长一些，因为用户有时看域名，有时看路径名，有时看搜索，我们没办法预测。于是老板提出了“Excel解决方案”，即固定列宽，自动隐藏多余的文字，用户可以通过拖拽调整列宽。这个方案理论上可以解决问题，但是实现起来难度太大，因为浏览器自带自适应表格宽度的算法。如果使用“Excel方案”，则必须放弃该算法，手动实现。成本很高，不到万不得已不想做。最后动态断线，根据表格的宽度计算在哪里断线。还是不行，计算太难了。使用解决这个问题困扰了我很久，直到前两天突然发现了软换行的存在。而且它的兼容性非常好，连IE8都支持。意思是“可以交换，也可以不交换”。当元素宽度不够需要换行时，从中改变；如果宽度足够，它不会换行。因此，我只需要在“可能的”换行符所在的地方添加这个元素，就可以达到我的目的。写代码很简单，大致是这样的：functionwrapUrl(url){if(!url){return'';}//先把协议拿出来，这里我不想换行consthead=url.substring(0,10);constleft=url.substring(10);//在`?&/`前面插入``//或者16个连续的英文数字也需要换行，中断hash和md5返回head+left.replace(/([?&\/]|([a-zA-Z0-9]{16}))/g,str=>''+str);}实际上工作正常，可能是这样的（在截图中，被放置在破损位置后面，觉得不好看，所以调整了一下）：相对于
，后者是固定的换行符，当表格内容不多，有足够显示URL的时候，空格会还包裹，这是不合适的。总结需要注意的是，的渲染是非常特殊的。浏览器会花费大量的时间去计算每一列的内容和计算它的宽度，所以性能会比较差。这也是不使用进行布局的原因。在这种情况下，使用其实是想借用浏览器的机制来计算表格中每一列的宽度。所以是合适的。表格渲染后，最好保持内容固定，不要做复杂的改变，比如隐藏/显示（上面说的8.3格式），因为内容的改变会导致浏览器重新计算布局和重新渲染，这会消耗更多的机器性能。还有，做了十几年的前端，稍稍松懈之后，完全看不清楚，没有用到的标签。看来有必要找时间把HTML和CSS再过一遍。
