问题描述：
想实现一个聊天气泡框时需要一个突出的尖角，于是想到了借助伪元素来实现
实现目标：
实现一个可以动态变长的聊天气泡（如图所示）
实现过程：
版本一：使用absout+relative定位实现，bubble元素使用relative定位，然后bubble::after元素使用absolute定位，但是定位时使用的是px为单位，实现要求的样式是可以的，但是消息的长度是不定的，使用px来定位不符合变长的要求。
版本二：基于版本一的改进，把px改为百分比。但是当长度变化时突出的尖角和气泡内容部分无法贴合。（如图所示）
版本三：使用dispaly:table,定位时只用指定为元素的top，left就不用管了。直接上代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
</head>
<style>
.bubble{
position: relative;
height: 30px;
line-height: 30px;
border-radius: 4px;
background-color: rgba(0, 0, 0, 50%);
display: table;
//word-break: break-all;
//wihte-space: normal；
}
.bubble::after {
position: absolute;
top: 32%;
content: '';
border: 4px solid transparent;
border-left-color: rgba(0, 0, 0, 50%);
}
</style>
<body>
<span class="bubble">
1313113123123
</span>
<script>
let oContent = document.querySelector('.bubble');
oContent.innerHTML = '123'.repeat(20)
</script>
</body>
</html>
实现效果：完美解决。
这里涉及到很多知识点，于是乎总结一下：
dispaly: table的特点：
1、表格的 display:table,既不是行内元素也不是块级元素
2、宽度，高度，全部都是以内容为主-自适应
3、独自成行
在解析dispaly为table的元素时，浏览器不会立马显示内容，而是等内容渲染好再显示，而dispaly为block的元素则是，一行一行的渲染并显示。
值得改进的地方：文本只能显示在同一行，无法换行。
文本换行: （样式详细见:https://blog.csdn.net/wang_yu_shun/article/details/124854767）
word-break: break-all;
white-space: normal;
flex容器内部元素换行:
flex-wrap: wrap;
大家可以自己尝试改进一下。
标签：元素,break,聊天,table,dispaly,bubble,CSS,气泡 From： https://www.cnblogs.com/qkq505/p/16733538.html