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

Question

当我有ellipsis长词时，它会中断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

伪元素来拯救！https://jsfiddle.net/0pmzq3p4/

.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;
}
.trunc::before,
.trunc::after {
  white-space: pre;
}
.trunc::before {
  content: 'id: [\A\00a0';
}
.trunc::after {
  content: '\A]';
}

<div class="container">
  <div class="trunc">
userrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
  </div>
</div>

资料来源：

1. 我的知识
2. https://stackoverflow.com/a/17047836/915875
3. https://stackoverflow.com/a/5467676/915875

Answer 2

这可能是因为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元素。请注意，在这里您还必须在类中定义您的ellipsis和。overflowcontainer

希望它有所帮助！

Answer 3

找到更新的小提琴，应该可以正常工作。代码更新为：

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

注意额外的显示：inline-block

更新小提琴 - https://jsfiddle.net/b35m449x/4/