让div随着内容变化而变化

在开发中,尤其是聊天框的CSS设置 ,是需要根据内容的多少来设置宽高的

比如下面这个BUG效果 ,绿色的背景只需要显示文字部分即可,但是整条都是绿色.体验实在是不好.

出现的原因就是 这是一个div盒子,他默认是块级元素
display:block;

1、display:block就是将元素显示为块级元素。　block元素的特点是：
　　总是在新行上开始；
　　高度，行高以及顶和底边距都可控制；
　　宽度缺省是它的容器的100%，除非设定一个宽度

解决措施 让他变成行内款元素
加上以下两句代码

 .chat-text {
  display: inline-block !important;
  display: inline;
  }

就变成了随着内容宽度自行变化

display:inline就是将元素显示为内联行内元素。

inline元素的特点是：
　　和其他元素都在一行上；
　　高，行高及顶和底边距不可改变；
　　宽度就是它的文字或图片的宽度，不可改变。
　　, , , , , 和是inline元素的例子。

3、display:inline-block将对象呈递为内联块级对象。
　　display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。