Crema Crema - 5 months ago 29
CSS Question

List display inline text text-overflow

I'm trying to have a list of element displayed inline with a

text-overflow : ellipsis
. But after several attempt I cannot make the text-overflow working it still making a clip instead of ellipsis

ps : This div can be resized that explain the
text-align : center




div {
position: relative;
left: 100px;
width: 175px;
border: 1px solid black;
text-align: center;
white-space: nowrap;
overflow : hidden;
text-overflow : ellipsis;
}

ul{
margin: 0;
padding: 0;
}

li {
display: inline-block;
background-color: silver;
}

<div>
<ul>
<li>some text</li>
<li>some text that will overflow</li>
</ul>
</div>





https://jsfiddle.net/Crema/xg29zmz8/2/

Answer

The key here is to apply display:inline on the ul and li:

div {
    position: relative;
    left: 100px;
    width: 150px;
    border: 1px solid black;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
ul {
    display: inline;
    padding: 0;
}
li {
    display: inline;
    background-color: silver;
}
<div>
    <ul>
        <li>some text</li>
        <li>some text that will overflow</li>
    </ul>
</div>

Comments