2 tyily TYILY 于 2016.09.17 17:18 提问

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

如题,如何做到如下文字气泡效果?文字多时如图效果:文字气泡效果1文字少时效果:气泡文字效果(宽度不变)。气泡背景如下气泡背景

2个回答

showbo
showbo   Ds   Rxr 2016.09.17 17:39

css3的background-size:100% 100%

 <style>
    .Bubble{padding:5px 25px 5px 5px;background-image:url(http://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>
TYILY
TYILY 回复showbo: 非常感谢,对我帮助很大
大约一年之前 回复
showbo
showbo 回复TYILY: 你要兼容什么浏览器先,不考虑ie8-用css3的border-radius实现圆角,那个箭头单独出来,而不是整个一个背景,
大约一年之前 回复
TYILY
TYILY 谢谢答主,但我想要的并非这个效果,你的代码只是对背景做了缩放,而图中效果要求不是使背景缩放,而是只有背景中间部分改变大小。
大约一年之前 回复
c273218496
c273218496   2016.09.17 17:41

以前是给元素写个父级DIV 在div里面设置宽高,然后在你需要设置的对象下面设置宽高100%

TYILY
TYILY 是与楼上代码相似吗?
大约一年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片