文本溢出：省略号不被尊重
Posted
技术标签:
【中文标题】文本溢出：省略号不被尊重【英文标题】：text-overflow:ellipsis not respected 【发布时间】：2018-06-10 00:03:06 【问题描述】：见下面的代码。关于右上角的文本框，如果单击它会出现一个下拉框。我希望这个框太长的文本以省略号结尾，这是 text-overflow:ellipsis 应该做的。据我了解， text-overflow:ellipsis 需要 3 件事：
空白：nowrap 溢出：隐藏 宽度是绝对值，不是百分比正如您在我的 html 中看到的，所有这些条件都已满足，但仍不遵守 text-overflow:ellipsis。我错过了什么？
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
<script src="https://use.fontawesome.com/6e0448e881.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="searchbar">
<form class="form-inline my-2 my-lg-0" method="get">
<div class="dropdown">
<input name="q" id="qbox" data-toggle="dropdown" type="search" class="form-control" placeholder="Search" autofocus="autofocus" autocomplete="off" aria-haspopup="true" aria-expanded="false"/>
<div id="search_results" class="dropdown-menu" role="menu" aria-labelledby="qbox">
<div>a</div>
<div>b</div>
<div>very long text very long text very long text</div>
</div>
</div>
</form>
</li>
</ul>
<style>
.searchbar .dropdown-menu
left: initial;
.form-inline .form-control
width: 10em;
div#search_results
width: 12.5em;
font-size: .8em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
</style>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>
另外，对于缩进不佳的 HTML，我深表歉意。这是 SO 正在做的事情，因为我确定我正确粘贴了它（在我的最后一个问题中，我手动缩进它是正确的，然后当我编辑它时它恢复为这样）
编辑：要明确：问题与单击右上角的搜索栏时出现的下拉框有关！有些人似乎对此不清楚。
【问题讨论】：
***.com/questions/7993067/…的可能重复 不是重复的。我忘记了 display:block，但是将它添加到 CSS 中仍然不能解决问题。这意味着该问题的答案“您需要 CSS 溢出、宽度、显示和空白”在我的场景中不起作用。 任何人都需要提供答案，他们需要使用您提供的代码创建一个minimal reproducible example。在问题本身中包含这样的示例并删除所提问题的所有不相关代码是尊重试图帮助您的人的时间的标志，同时也增加了获得高质量答案的机会。跨度> 这个例子应该做什么？我无法让它显示任何内容。 Andrei，我认为这是一个最低限度的可验证示例。那里有一些我忘记删除的代码，但在大多数情况下，所有这些都与问题相关，而且不会太少。再少一点，我就有可能得到对真实页面不起作用的答案（这不是）我实际上付出了相当多的努力来创建一个最小可验证的例子（尽管我承认我重用了早期问题中的大部分特定代码我有大致相同的方面，我忘了删除一些不相关的标签）。 【参考方案1】：当您使用 Bootstrap 时，您可以使用正在执行此操作的 .text-truncate 类。
<div class="text-truncate">very long text very long text very long text</div>
#search_results
width: 12.5em;
<div id="search_results">
<div>a</div>
<div>b</div>
<div class="text-truncate">very long text very long text very long text</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>请注意，您必须直接在“列表”项上应用该类，而不是在父 div 上。
或者，您可以更改样式以匹配内部 div：
#search_results
width: 12.5em;
font-size: .8em;
/* mind the selector */
#search_results div
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
【讨论】：
啊，我明白了。我看过 text-truncate 类，但当然这只是我在问题中发布的 css 的简写。缺少的链接是我尝试将其应用于错误的事物。谢谢！以上是关于文本溢出：省略号不被尊重的主要内容，如果未能解决你的问题，请参考以下文章