CSS 省略号将句子分成新行答案

【问题标题】：CSS ellipsis breaks sentence up onto new linesCSS 省略号将句子分成新行
【发布时间】：2017-02-24 14:35:22
【问题描述】：

当我在长字上有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;
}

【问题讨论】：

标签： html css truncate nowrap

【解决方案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。

希望对你有所帮助！

【讨论】：

这几乎可以工作，但我需要最后一个右括号，而不是去一行:)它需要在同一行。
谢谢你！我尝试将右括号放在一个单独的 div 中并将浮点数放在两个 div 上，但这并不能将它放在 ...
.container { display: inline-block; white-space: nowrap; border: 1px solid black; //width: 100%; } .trunc { overflow: hidden; white-space:nowrap; text-overflow:ellipsis; width:150px; display:inline-block; vertical-align:top; } 将您的trunc 设为一个跨度，然后将其用作 CSS 并查看它是否有效。

【解决方案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/

【讨论】：

【解决方案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: [\A\00a0';
}
.trunc::after {
  content: '\A]';
}

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

来源：

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

【讨论】：