html - CSS 省略号将句子分成新行

Question

当我在长词上有 省略号 时，它会将 id: 和 [ ] 分成不同的行。我似乎无法将它们一行一行地放在一起。我试过 white-space: nowrap 和 display: inline-block。有什么想法吗？

https://jsfiddle.net/b35m449x/4/

HTML

<div class="container">id: [<div class="trunc">userrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr</div>]</div>

CSS

.container {
   display: inline-block;
   white-space: nowrap;
   border: 1px solid black;
   width: 100%;
}
.trunc {
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   -o-text-overflow: ellipsis;
   white-space: nowrap;
}

Answer 1

这可能是因为在您的代码中使用了另一个 div。如果您不需要 div，只需将其删除并像这样修改容器:

.container {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
border: 1px solid black;
width: 100%;
}

它会正常工作。

尽管如果您希望在该特定行(userrr...)上使用单独的样式，那么您可能希望将 div 替换为 span 元素。请注意，您还必须在 container 类中定义 ellipsis 和 overflow。

希望对您有所帮助!