flex自适应宽度显示省略号

text-overflow:ellipsis文本溢出显示省略号，通常的搭配用法以下：

div{
  text-overflow:ellipsis;
  overflow:hidden;
  white-space: nowrap;
 }
复制代码

而想要在必定宽度内显示省略号，必须还有一个固定的宽度，不然元素宽度会扩展至父级元素的宽度。但前不久碰到一个问题，但愿实现以下布局：

但愿左边的图片宽度固定，右边宽度自适应，内容部分溢出显示省略号。因而出现了难题：宽度须要自适应，但自适应就没法显示省略号。首先，咱们简单看一下不考虑这个困难，咱们通常会怎么写：

<div id="wrap">
    <img alt="" id="left" src="img1.jpg">
    <div id="right">
        <p class="name">昵称</p>
        <p class="content">内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号内容显示省略号</p>
    </div>
</div>
复制代码

#wrap {
    display: flex;
    border: 1px solid black;
}
#left {
    width: 100px;
    height: 100px;
    margin: 10px;
    border: 1px solid #ccc;
}
#right {
    flex: 1;
    background: yellow;
}
.content  {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: red;
}
复制代码

这时候表现以下：

（设置了背景色，以便更好的区分元素）

显然，因为.content设置了white-space:nowrap;，所以内容就将父元素#right撑开，溢出了#wrap。停一下，想想既然溢出是由于#right被撑开了，那给#right（即.content的父元素）设置overflow:hidden就能够防止.content将#right撑开，应该就能达到效果。试一下，果真达到了预期效果:

在网上查了一下，还能够给#right设置width:0（或者一个较小的宽度），也能够达到一样是效果。