文本扩展到按钮 HTML 之外
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34581440/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Text extends outside button HTML
提问by Zanko
https://plnkr.co/edit/dZigMtncPEed4MK75swb?p=preview
https://plnkr.co/edit/dZigMtncPEed4MK75swb?p=preview
<button style="width: 50px" type = "submit">Very very very verey looooooooooooooooooooooong</button>
As you can see, the text extends outside. Is there any way to truncate the text? The reason behind this is it is that the button is part of a drop down menu.
如您所见，文本延伸到外面。有没有办法截断文本？这背后的原因是该按钮是下拉菜单的一部分。
The text is white so it might hard to see it 'breaking' the button.
文本是白色的，因此可能很难看到它“破坏”了按钮。
[UPDATE]
[更新]
Is there anyway to add margin to the text-overflow: ellipsis. The ellipsis is too close to the text and it is not appealing (in my opinion)
无论如何要为文本溢出添加边距：省略号。省略号与文本太接近，没有吸引力（在我看来）
[UPDATE 2] Since I usually put my caret at the end of the text, the solution above cause my caret to be missing. Is there any way for me to put an ellipses follow a caret?
[更新 2] 由于我通常将插入符号放在文本末尾，因此上述解决方案会导致我的插入符号丢失。有什么办法可以让我在插入符号后面放一个省略号吗？
[UPDATE 3]
Is there anyway to make the caret align at the very end?
[更新 3] 无论如何要使插入符号在最后对齐？
回答by Josh Crozier
If you want to truncate the text and add ellipsis, you could add overflow: hiddento clip the text, and then use text-overflow: ellipsisto add the '... ' ellipsis:
如果你想截断文本并添加省略号，你可以添加overflow: hidden来剪辑文本，然后使用text-overflow: ellipsis来添加 '...' 省略号：
button.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
回答by Mathew Crogan
Just set the width:auto;. This happens because sometimes the text needs more than 50px. This can also be avoided by putting overflow:hiddenwhich will make any text exceeding the button's width disappear, giving you a perfect 50px button.
只需设置width:auto;. 发生这种情况是因为有时文本需要超过 50 像素。这也可以通过 put 来避免，overflow:hidden这将使任何超过按钮宽度的文本消失，为您提供一个完美的 50px 按钮。
回答by Nishant Singh
Just Use Following is you want to wrap the text inside the button
仅使用以下是您想将文本包裹在按钮内
white-space:normal !important;
word-wrap:break-word;
回答by Kalkran
Try using
尝试使用
overflow-x: hidden;
in the style tag. This will make it stay in the box and hide what's overflowing. Alternatively, choose a shorter title.
在样式标签中。这将使它留在盒子里并隐藏溢出的东西。或者，选择一个较短的标题。
回答by remdevtec
Add
添加
.truncate_text {
max-width:90%;
display:inline-block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
as a class to your button and feel free to play with the 90% width of the button (according to image above you would probable want it around 30%)
作为按钮的一个类，可以随意使用按钮的 90% 宽度（根据上图，您可能希望它在 30% 左右）
