Question

我试图让一个元素列表与text-overflow : ellipsis内联显示。但经过几次尝试后，我无法使文本溢出工作，它仍然制作剪辑而不是省略号

ps：可以调整此div的大小来解释text-align : center

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

Answer 1

此处的关键是在display:inline和ul上应用li：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

＆＃13;

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;
}

＆＃13;

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

＆＃13;

列表显示内联文本文本溢出

2 个答案: