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

  <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;
    }

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

    .left_triangle {
        height: 0px;
        width: 0px;
        border-width: 8px;
        border-style: solid;
        border-color: transparent aquamarine transparent transparent;
        position: absolute;
        left: -15px;
        top: 15px;
    }

    .right_triangle {
        height: 0px;
        width: 0px;
        border-width: 8px;
        border-style: solid;
        border-color: transparent transparent transparent gold;
        position: absolute;
        right: -15px;
        top: 15px;
    }

    </style>

  <!-- Left -->
    <div class="sender">
        <div>
            <img src="img/img/01.jpg">
        </div>
        <div>
            <div class="bg">
                <div class="left_triangle"></div>
                <span> 聊天.</span>
            </div>
        </div>
    </div>
    <!-- Right -->
    <div class="receiver">
        <div>
            <img src="img/img/02.jpg">
        </div>
        <div>
            <div class="bg">
                <div class="right_triangle"></div>
                <span> 1111hello worldhello, man!hello, man!hello, man!hello, man!hello, man!2222  聊天工具浏览器CSS3气泡对话框因为css3尚未形成标准,所以现行的浏览器对于css3...为了减少不必须要的html元素,我们通过伪属性来给对话框添加”尾巴“ .
     </span>
            </div>
        </div>
    </div>
    <!-- Right -->
    <div class="receiver">
        <div>
            <img src="img/img/02.jpg">
        </div>
        <div>
            <div class="bg">
                <div class="right_triangle"></div>
                <span> 111</span>
            </div>
        </div>
    </div>
    <!-- Right -->
    <div class="receiver">
        <div>
            <img src="img/img/02.jpg">
        </div>
        <div>
            <div class="bg">
                <div class="right_triangle"></div>
                <span>形成标准,</span>
            </div>
        </div>
    </div>
    <!-- Left -->
    <div class="sender">
        <div>
            <img src="img/img/01.jpg">
        </div>
        <div>
            <div class="bg">
                <div class="left_triangle"></div>
                <span> 聊天形成标准形成标准形成标准形成标准.聊天形成标准形成标准形成标准形成标准.聊天形成标准形成标准形成标准形成标准.聊天形成标准形成标准形成标准形成标准.聊天形成标准形成标准形成标准形成标准.聊天形成标准形成标准形成标准形成标准.聊天形成标准形成标准形成标准形成标准.聊天形成标准形成标准形成标准形成标准.</span>
            </div>
        </div>
    </div>
      <!-- Left -->
    <div class="sender">
        <div>
            <img src="img/img/01.jpg">
        </div>
        <div>
            <div class="bg">
                <div class="left_triangle"></div>
                <span> 聊天形成标准形成标准形成标准形成标准.聊天形成标准形成标准形成标准形成标准.聊天形成标准形成标准</span>
            </div>
        </div>
    </div>
      <!-- Left -->
    <div class="sender">
        <div>
            <img src="img/img/01.jpg">
        </div>
        <div>
            <div class="bg">
                <div class="left_triangle"></div>
                <span> 聊天形形成标准.聊天形成标准形成标准形成标准形成标准.聊天形成标准形成标准形成标准形成标准.聊天形成标准形成形成标准.聊天形成标准形成标准形成标准形成标准.聊天形成标准形成标准形成标准形成标准.聊天形成标准形成</span>
            </div>
        </div>
    </div>

效果：网页上的哈！

效果：手机端模拟的效果哈！也是可以的，棒棒哒！