Question

Module

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

文字是白色的，所以很难看到它“打破”按钮。

[UPDATE]

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

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

[更新3] 反正有没有让插入符号在最后对齐？

Answer 1

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

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

Answer 2

只需设置width:auto;即可。发生这种情况是因为有时文本需要超过50px。这也可以通过放置overflow:hidden来避免，这会使任何超出按钮宽度的文本消失，为您提供一个完美的50px按钮。

Answer 3

尝试使用

overflow-x: hidden;

样式标签中的

。这将使它留在盒子里，隐藏什么溢出。或者，选择较短的标题。

Answer 4

仅需使用以下内容是您要将文本包装在按钮内

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

Answer 5

添加

.truncate_text {
  max-width:90%;
  display:inline-block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

作为按钮的一个类，可以随意使用按钮的90％宽度（根据上图，您可能需要大约30％）