html - html按钮中的文本连字符

Question

我有一个固定宽度的按钮。在此按钮中有一个<b>带有名称的标签。名称是可变的，它可以比按钮的宽度长。

在浏览器中查看时，较长的文本不适合按钮。有没有办法将按钮文本连字符？文本没有“空格”但下划线：“_”。

Answer 1

您可以使用 css text-overflow属性来指定用于表示剪切文本的自定义字符串。例如，

HTML

<div>
 some overflowing text
</div>

CSS

div{
 width:25px;
 height:30px;
 border:1px solid;
 overflow:hidden;
 white-space:nowrap;
 text-overflow: "_";
}

演示

Answer 2

您正在寻找的是text-overlow:'_';. 要使文本溢出，请使用以下 CSS：

button{
    width:100px;
  overflow: hidden;
  text-overflow: '_';
  white-space: nowrap;
}    

<button>My text is to long for me!</button>

JSFiddle Demo Ellipsis
(...) 也可以被text-overlow:ellipsis;

Answer 3

是的，您可以使用“连字符”CSS 属性来实现这一点。阅读更多关于 Word Hypernation

.button{
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
width:90px;
}

演示

Answer 4

我猜您希望长文本出现在有限宽度的按钮中。先看看DEMO。

CSS

#test{
  display: block;
  width:100px;
  height:30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
  word-wrap: break-word;
}

HTML

<button type="button" id="test">text_hyphenation_within_a_html_button</button>