截断长文本的CSS样式不起作用

Question

如果页面标题长于availbale空间，我需要用省略号截断页面标题。

演示 - 简称：

演示 - 长标题（css样式不起作用）：

所有评论都说增加宽度 - 也不起作用

Answer 1

将您的省略号样式添加到.navbar-header，您还需要定义width或max-width，您可以在我的codepen

上查看此内容

或者您可以将width或max-width添加到.navbar-title，但作为内嵌元素，您还需要将display更改为inline-block信。

Answer 2

这对我有用。

将锚标记放在div中。

<div class="title-div">
<a class="navbar-title">Some very long title</a>
</div>

css应如下所示：

.title-div
{
    max-width: 128px;
    overflow: hidden;    
    text-overflow: ellipsis !important;
}
.navbar-title
{
    white-space:nowrap !important;
}

Answer 3

您实际上可以缩短标题，并在末尾添加三个点，然后将其保存为类，并将其应用于标题标记。

但是它要求你的容器div设置宽度，否则这会把它推得更宽，这就是正在发生的事情。

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

https://jsfiddle.net/leecollingsco/Lq34xquf/1/

Answer 4

div{
text-overflow: ellipsis;
white-space: nowrap; 
overflow: hidden; 
width: 100px;
}