文本扩展到按钮HTML之外

Question

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

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

如您所见,文本扩展到外部.有没有办法截断文字？这背后的原因是按钮是下拉菜单的一部分.

文字是白色的,所以很难看到它"打破"按钮.

[UPDATE]

无论如何还要为文本溢出添加边距:省略号.省略号太接近文本而且没有吸引力(在我看来)

[更新2]由于我通常把我的插入符号放在文本的末尾,因此上面的解决方案会导致我的插入符号丢失.有什么方法可以让我用椭圆形跟随插入符号吗？

[更新3]无论如何都要让插入符号在最后对齐？

Answer 1

如果要截断文本并添加省略号,可以添加overflow: hidden剪辑文本,然后使用text-overflow: ellipsis添加"..."省略号:

更新的示例

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

Answer 2

如果您想将文本包裹在按钮内，只需使用以下

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