html - 文本扩展到按钮 HTML 之外

Question

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

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

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

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

[更新]

无论如何要为文本溢出添加边距:省略号。省略号离文本太近而且不吸引人(我认为)

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

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

Answer 1

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

Updated Example

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