文字气泡自适应宽度
文字气泡自适应宽度
拉普拉斯婷 发表于1年前
文字气泡自适应宽度
  • 发表于 1年前
  • 阅读 16
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: 实现文字自适应宽度

实现聊天气泡效果,如图所示:

想要实现的效果图

<dl>
    <dt>15:20:36</dt>
    <dd>
        <img src="images/c_left_tip.png" alt="">
        <div>
             <p>
                在一定价值投资的前提下,注重长短期结合交易在一定价值投资的前提下定价值投资的前提下
             </p>
        </div>
    </dd>        
</dl>

p的内容要自适应文字宽度所以不能设置固定宽度,但是要和左边的img显示在一行,用float实现,没有宽度是不行的,所以关键是给p标签外面加一层div,然后给这个div设置宽度就OK啦!

共有 人打赏支持
粉丝 0
博文 33
码字总数 5836
×
拉普拉斯婷
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: