使用 text-overflow 时空格的位置：省略号；

Question

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

用户可以通过单击 his/her 名称打开个人菜单。当这个人的名字很长时（蓝色条）我想用 text-overflow: ellipsis.

来缩短它

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

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

有什么方法可以只用 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

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

.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

Answer 2

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

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

Answer 3

您可以使用可爱的 :before pseudoSelector 代替图标 span:

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

fiddle

使用 text-overflow 时空格的位置：省略号；

Position of whitespace while using text-overflow: ellipsis;

html

css

ellipsis