CSS实现一个简单的微信聊天气泡

问题描述：

想实现一个聊天气泡框时需要一个突出的尖角，于是想到了借助伪元素来实现

实现目标：

实现一个可以动态变长的聊天气泡（如图所示）

 

 

 实现过程：

版本一：使用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;

 

 

大家可以自己尝试改进一下。

 

什么？你不想尝试？

好

我替你尝试

实现换行效果:

 

 直接上代码：

<!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;
        display: table;
        height: 30px;
        max-width: 300px;
        padding:3px 6px;
        line-height: 30px;
        border-radius: 4px;
        background-color: #9cda62;
        overflow-wrap: anywhere;
        font-size: 8px;
    }
    
    .bubble::after {
        position: absolute;
        right: -8px;
        top: 10px;
        content: '';
        border: 4px solid transparent;
        border-left-color: #9cda62;
    }
</style>
<body>
      <span class="bubble">
          1313113123123
      </span>
    <script>
        let oContent = document.querySelector('.bubble');
        oContent.innerHTML = '你大爷'.repeat(20)
    </script>
</body>
</html>

用了一下max-width限制气泡宽度，然后overflow-wrap: anywher让文字换行。还有就是把气泡的尖角固定了，不然会有奇妙的问题。

至此大功告成！

 
posted @ 2022-09-27 10:03  grigeorge  阅读(2109)  评论(0)  编辑  收藏  举报