聊天对话气泡-字体自适应气泡宽度

  <style>
    .sender {
        overflow: hidden;
        position: relative;
         margin-bottom: 20px;
    }

    .sender>div:nth-of-type(1) {
        position: absolute;
    }

    .sender>div:nth-of-type(2) {
        min-width: 100px;
        padding: 0 55px;
        line-height: 23px;
    }

    .sender div.bg {
        margin: 0 20px 10px 15px;
        border-radius: 7px;
        padding: 10px;
        display: inline-block;
        position: relative;
        background-color: aquamarine;
    }

    .receiver div:first-child img,
    .sender div:first-child img {
        width: 50px;
        height: 50px;
    }

    .receiver {
        overflow: hidden;
        position: relative;
         margin-bottom: 20px;
    }

    .receiver>div:nth-child(1) {
        position: absolute;
        right: 0;
    }

    .receiver>div:nth-of-type(2) {
        min-width: 100px;
        padding: 0 55px;
        line-height: 23px;
    }

    .receiv