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

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

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

它会工作的很好。

虽然如果你想在特定的行(usererrr…)上单独的样式，那么你可能想用span元素替换你的div。请注意，这里还必须在container类中定义ellipsis和overflow。

希望对你有帮助!

Answer 2

查找更新的小提琴，应该工作良好。代码中的更新是:

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

注意附加的display: inline-block

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

Answer 3

拯救伪元素!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: [A0a0';
}
.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