CSS实现文字自适应宽度

如下一个样式,如何实现。昵称过长显示省略号,如图二。

clipboard.png

clipboard.png

clipboard.png

需要考虑的点

  1. 昵称长,显示省略号
  2. 昵称短,图标紧随昵称
  3. 后面图标时不时的要增加减少,修改起来方便。

我想到的实现方案

  1. css方案(就是目前我用的flex),缺点是图标和昵称有时候会出现一个不可抗拒的间距。缺点二来就是flex的兼容问题了。
  2. js计算方案(想法),程序用vue实现的,图标为一个组件,渲染完成通知上面自己的宽度,动态修改文字宽度。

想问问还有什么好的实现方案,尝试过float+BFC但是效果不好。

阅读 9.8k
5 个回答

楼主您好,flex方式还是比较好的,您说的空格可以用负的margin解决一下,暂时还没弄明白是怎么产生的

我这里用BFC的方式实现了一下

主要代码如下

<style>
    .item{
        display: inline-block;
        max-width: 100%;
    }

   .item-icon i{
       display: inline-block;
       width: 10px;
       height: 10px;
       background: rebeccapurple;
       margin: 2px;
    }
    .item-icon{
        float: right;
    }
    .item-txt{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>

<div class="item">
        <div class="item-icon"><i></i><i></i></div>
        <div class="item-txt">这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本,超出的部分会省略</div>
    </div>

clipboard.png

这里的图标用了一个小正方形表示的

https://codepen.io/xboxyan/pe...


如果有用可以点赞并采纳,谢谢 ^^

先把我自己的方案放出来。 DEMO

clipboard.png

红框位置就是莫名间距,因为这个间距是宽度自己实现的。所以我认为没法解决

clipboard.png

添加一个最大宽度,代码如下:

span.main_txt {
    max-width: 200px;
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题