text-overflow:ellipsis not respected

Question

See code below. Concerns the text box in the top right, if you click it a drop-down box will appear. I want text that is too long for this box to end in ellipsis, which is what text-overflow:ellipsis is supposed to do. As I understand it, text-overflow:ellipsis requires 3 things:

white-space: nowrap
overflow: hidden
width is in absolute terms, not percentage

As you can see in my HTML, all these conditions are met, yet text-overflow:ellipsis is still not respected. What am I missing?

<!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>

Also, I apologize for the poorly indented HTML. It's something SO is doing to it, because I'm sure I'm pasting it correctly (and in my last question I manually indented it to be correct, then it reverted to being like this when I edited it)

EDIT: To be clear: the problem concerns the dropdown box that appears when you click the search bar in the top right! Some people seemed unclear about that.

Possible duplicate of https://stackoverflow.com/questions/7993067/text-overflow-ellipsis-not-working — krampstudio, Dec 29 '17 at 15:00
Not a duplciate. I forgot display:block, but adding it to the CSS still doesn't fix the issue. Which means that the answer of that question, "You need to have CSS overflow, width, display, and white-space", does not work in my scenario. — Kahr Kunne, Dec 29 '17 at 15:01
For anyone to provide an answer they need to create a [mcve] with the code you provided. Including such an example in the question itself and removing all irrelevant code for the question asked is a sign of respect for the time of people who are trying to help you and, at the same time, increases the chances of getting quality answers. — tao, Dec 29 '17 at 15:27
What is the example supposed to do? I can't get it to show anything. — Mr Lister, Dec 29 '17 at 15:27
Andrei, I would consider this a minimum verifiable example. There's a little bit of code there that I forgot to remove, but for the most part all this is relevant to the problem without being too minimal. Any less and I risk getting answers which wouldn't work for the real page (which this is not) I actually put quite some effort into creating a minimum verifiable example (though I'll admit I reused most of this specific code from earlier questions I had about the same aspect, and I forgot to remove a few irrelevant tags). — Kahr Kunne, Dec 29 '17 at 15:43
For your convenience I've further simplified the example, though it has not changed much. I believe that this is the most minimal example that's still representative of my actual situation — Kahr Kunne, Dec 29 '17 at 15:47

score 0 · Accepted Answer · answered Dec 29 '17 at 20:26

As you are using Bootstrap, you can make use of the .text-truncate class which is doing just that.

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

Note, that you have to apply the class on the “list” items directly, not on the parent div.

Alternatively, you could alter your styles to match the inner divs:

#search_results {
    width: 12.5em;
    font-size: .8em;
}

/* mind the selector */
#search_results div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Ah, I see. I had seen the text-truncate class but of course that's just shorthand for the css I posted in my question. The missing link was that I'd tried applying it to the wrong thing. Thanks! — Kahr Kunne, Dec 29 '17 at 21:05

text-overflow:ellipsis not respected

1 Answers1