做聊天的对话框的时候，经过测试发现一个bug，发送文字过长会导致 <span>标签内容溢出，出来的效果会产生 <span>标签重叠在一起。
而使用 <div>可以在内容过长时自动换行，而且不会堆叠在一起，即把 <div>容器撑大。
但是又产生了一个问题：内容过短时 <div>的宽度还是按最大的百分比来的，这样会造成文字很少，但是对话框背景框却顶到最宽了。
要实现的效果是对话框根据文字长度自动变长变短，并且有一个最大宽度，即 max-width属性保证不变的过宽而不好看了。
后来尝试了 <label>，居然完美的实现了效果。既有随着文字自动撑大容器宽度，又能实现达到一定宽度换行，完美的实现了想要的效果。
网上查了下， <label>是用于表单绑定 <input>标签的，即通过 for属性来绑定对应 <input>的 id，点击label会触发相应的 <input>标签点击事件。
所以想了想，应该跟 <label>这个标签的功能属性无关，因为它不是设计用来承载文本内容的，不像 <p> 和<span>。
最后果断想到， <label>既有 <div>的自动换行的效果，又有 <span>自动撑大容器的效果，那应该是内联块元素，即 display:inline-block。很可能是这个属性在起作用。
所以果断把 <span>加上display:inline-block，成功实现了想要的效果。
但又有一个问题，纯连续字母和数字不会换行，最后加上word-wrap: break-word强制自动换行搞定。
word-break: break-all会当文本达到宽度就强制换行，而不管单词有没有完整显示，不推荐使用。比如consulate只显示cons就截断了。而word-wrap: break-word会把consulate直接换到下一行显示
网友评论