CSS实现文字自适应宽度

Question

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

需要考虑的点

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

我想到的实现方案

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

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

Answer 1

楼主您好，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>

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

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

---

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

Answer 2

大概测试了一下，我的想法很简单，就是icon居右 float flex随意
http://jsrun.net/RIhKp/edit

Answer 3

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

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

Answer 4

css https://developer.mozilla.org...
使用详情：http://www.daqianduan.com/617...
单行文本溢出：

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行文本溢出：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

Answer 5

添加一个最大宽度，代码如下：

span.main_txt {
    max-width: 200px;
}