使用文本溢出时空格的位置：省略号;

Question

我有一个移动网站的顶栏，如下所示：

用户可以通过单击他/她的姓名来打开个人菜单。 如果此人的姓名很长（蓝色条），我想使用text-overflow: ellipsis来缩短它。

我得到了它（看起来像蓝色条）但现在如果我有一个简短的名字，箭头图标显示在右边（红色条）。我想保留名称旁边的箭头和箭头右侧的剩余空格，如绿色栏中所示。

我不想为任何元素（可能是按钮除外）设置宽度或最大宽度，因为我希望它可以在不同的移动设备上工作，因此可用宽度未知。

有没有办法用HTML和CSS实现这一目标？到目前为止我做了什么：

HTML

<button>Log off</button>
<div id="menu">
    <span id="icon">+</span>
    <span id="name">John Withthelonglastname</span>
</div>

CSS

#name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#icon { float:right;}
button { float: right;}

在这里小提琴：http://jsfiddle.net/webwolfe/L07t0zk7/

Answer 1

使用Flex，您可以使用 HTML 和 CSS 轻松实现此目的：

.menu {
  width: 200px;
  padding: 2px;
  color: white;
  display: flex;
}
.blue {
  background: blue;
}
.red {
  background: red;
}
.name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.icon {
  padding-left: 5px;
  padding-right: 5px;
  flex: 1 1 auto;
}
button {
  min-width: 70px;
}

<div class="menu blue">
  <span class="name">John Withthelonglastname</span>
  <span class="icon">+</span>
  <button>Log off</button>
</div>

<br>


<div class="menu red">
  <span class="name">John Doe </span>
  <span class="icon">+</span> 
  <button>Log off</button>
</div>

请注意FlexyBoxes作为玩家设置的小提琴手。

P.S：最好将类而不是ID用于通用元素

Answer 2

您可以使用内容在名称后面的图标中添加。

#name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#name:after{
    content: ' +';
    position: absolute;
}

Answer 3

您可以使用甜蜜的:before伪选择器代替图标span：

#name:before
{
content:'+';
z-index:999;
display:inline-block;
float:right
}

fiddle