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

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

TYILY
TYILY 是与楼上代码相似吗?
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
自适应的对话气泡皮肤实现方案
在实现评论及回复功能时,考虑可以让大家选择一个皮肤,让评论区域显得不那么单调,具体效果可以参考百度贴吧和QQ的聊天界面。本文给出了一种采用CSS Sprites的实现方式,气泡可以做到宽度和高度的自适应扩展。
resizableImageWithCapInsets拉伸缩放背景图片,仿聊天气泡,文字大小自适应label宽度,label多行显示
UIImageView *bubbleImageView=[[UIImageView  alloc]initWithFrame:CGRectZero];     UILabel *bubbleLable=[[UILabel alloc]initWithFrame:CGRectZero];     //多行显示     bubbleLable.numberOfLines=0;
css实现气泡文字提示框
css气泡文字提示框 实现的等腰直角三角形式的对话框 效果如下: 代码如下: css: .arrow span{border-color:#0FF #000 #f00 #ff0 ; top:0px;} html: div class="detail"> div class="arrow" > em >em>span>span> div> div> 修
可根据内容多少自动伸缩的textarea
最近用jquery写了一个自动伸缩的textarea, 主要是监听用户键盘事件,查看用户输入字符的多少,然后改变textarea的css height 高度 var height = 0; var wordcount = 0; $(document).ready(function(){ $("#question").keyup(function(){ var quest
阴影背景随着文字的宽度自适应
要求:如下图所示,阴影背景随着文字的宽度自适应
盒子宽度随文字的增加而变宽
盒子的宽度随文字的多少增大,如果字数多于一行还想要高度自适应的话要设置高度为auto&amp;lt;!DOCTYPE HTML&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;&amp;lt;meta charset=UTF-8&amp;gt;&amp;lt;title&amp;gt;展开隐藏&amp;lt;/title&amp;gt;&amp;lt;style&amp;gt;    .bor{         font-size:25px;        co
字体大小自动适应DIV
phone 设计                    文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小文字变小          window.onload = function(){      
让label自适应里面的文字,自动调整宽度和高度。
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0,0,0,0)];这个frame是初设的,没关系,后面还会重新设置其size。 [label setNumberOfLines:0]; NSString *s = @"string......"; UIFont *font = [UIFont fontWithName:@"
让文字自动适应表格宽度(CSS)
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">HTML>HEAD>TITLE> New Document TITLE>style>... .auto_arrange{...}{ table-layout:fixed } .auto_arrange td{...}{text-overflow:ellipsis;overfl
div内容文字自适应
神马都不用说了  先来张图 下面是代码  .mDiv{ background-color: red; width: 100%; height: 40px; line-height: 40px; color: black; font-size: 20px; display: inli