html - 使用文本溢出时空格的位置 : ellipsis;

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;}

在这里 fiddle :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作为 fiddler 来玩弄它的设置。

P.S:对于通用元素，最好使用类而不是 ID