Question

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

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元素。请注意，您还必须在ellipsis课程中定义overflow和container。

希望它有所帮助！

Answer 2

Pseudoelements救援！ https://jsfiddle.net/0pmzq3p4/

＆＃13;

.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]';
}

＆＃13;

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

＆＃13;

来源：

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

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/

CSS省略号将句子分解为新行

3 个答案: