前端开发如何做到文字气泡自动适应文字多少效果？

Question

如题，如何做到如下文字气泡效果？文字多时如图效果：文字少时效果：（宽度不变）。气泡背景如下

Answer 1

css3的background-size:100% 100%

 <style>
    .Bubble{padding:5px 25px 5px 5px;background-image:url(https://img-ask.csdn.net/upload/201609/17/1474103491_607130.png);background-size:100% 100%;width:235px;word-break:break-all;word-wrap:break-word}
</style>
<div class="Bubble">1<br />2<br />3333333333333333333333333333</div>
<div class="Bubble">1<br />2<br />3<br />3<br />3<br />3<br />3<br />3</div>