使用inline-block解决文字过长自动换行的问题

做聊天的对话框的时候，经过测试发现一个bug，发送文字过长会导致 标签内容溢出，出来的效果会产生 标签重叠在一起。

而使用

可以在内容过长时自动换行，而且不会堆叠在一起，即把

容器撑大。

但是又产生了一个问题：内容过短时

的宽度还是按最大的百分比来的，这样会造成文字很少，但是对话框背景框却顶到最宽了。

要实现的效果是对话框根据文字长度自动变长变短，并且有一个最大宽度，即 max-width属性保证不变的过宽而不好看了。

后来尝试了 ，居然完美的实现了效果。既有随着文字自动撑大容器宽度，又能实现达到一定宽度换行，完美的实现了想要的效果。

网上查了下， 是用于表单绑定 标签的，即通过 for属性来绑定对应 的 id，点击label会触发相应的 标签点击事件。

所以想了想，应该跟 这个标签的功能属性无关，因为它不是设计用来承载文本内容的，不像

和。

最后果断想到， 既有

的自动换行的效果，又有 自动撑大容器的效果，那应该是内联块元素，即 display:inline-block。很可能是这个属性在起作用。

所以果断把 加上display:inline-block，成功实现了想要的效果。
但又有一个问题，纯连续字母和数字不会换行，最后加上word-wrap: break-word强制自动换行搞定。

word-break: break-all会当文本达到宽度就强制换行，而不管单词有没有完整显示，不推荐使用。比如consulate只显示cons就截断了。而word-wrap: break-word会把consulate直接换到下一行显示