Question

见下面的代码。关注右上角的文本框，如果单击它，将出现一个下拉框。我希望这个框的文本太长，以省略号结尾，这是文本溢出：省略号应该做的。据我所知，文本溢出：省略号需要3件事：

white-space：nowrap
溢出：隐藏
宽度是绝对值，而不是百分比

正如您在我的HTML中看到的那样，满足所有这些条件，但是文本溢出：省略号仍未得到遵守。我错过了什么？

<!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道歉。这是它正在做的事情，因为我确定我正确地粘贴它（在我的上一个问题中，我手动缩进它是正确的，然后当我编辑它时它恢复为这样）

编辑：要清楚：问题涉及单击右上角搜索栏时出现的下拉框！有些人似乎不清楚这一点。

Answer 1

当您使用Bootstrap时，您可以使用正在执行此操作的let $att-sequence as attribute()* := (attribute a {1}, attribute b {2}, attribute c {3}) return <example> <element>{$att-sequence}</element> <element>{data($att-sequence)}</element> </example>类。

.text-truncate

<div class="text-truncate">very long text very long text very long text</div>

#search_results {
    width: 12.5em;
}

请注意，您必须直接在“list”项目上应用该课程，而不是在父div上。

或者，您可以更改样式以匹配内部div：

<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"/>

文本溢出：省略号未被尊重

1 个答案: