文本扩展到按钮 HTML 之外

Question

https://plnkr.co/edit/dZigMtncPEed4MK75swb?p=preview

 <button style="width: 50px" type = "submit">Very very very verey looooooooooooooooooooooong</button>

如您所见，文字延伸到外面。有没有办法截断文本？这背后的原因是按钮是下拉菜单的一部分。

文本是白色的，因此可能很难看到它“破坏”了按钮。

[更新]

无论如何要为文本溢出添加边距：省略号。省略号太靠近文本并且没有吸引力（在我看来）

[更新 2] 由于我通常将我的插入符放在文本的末尾，上面的解决方案导致我的插入符丢失。有什么办法可以让省略号跟在插入符号后面吗？

[更新 3] 有没有办法让插入符在最后对齐？

原文由 Zanko 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果要截断文本并添加省略号，可以添加 overflow: hidden 来剪辑文本，然后使用 text-overflow: ellipsis 添加“…”省略号：

更新示例

button.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

原文由 Josh Crozier 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您想将文本包装在按钮内，只需使用 Following

 white-space:normal !important;
word-wrap:break-word;

原文由 Nishant Singh 发布，翻译遵循 CC BY-SA 4.0 许可协议