我有一个固定宽度的按钮。在此按钮中有一个<b>
带有名称的标签。名称是可变的,它可以比按钮的宽度长。
在浏览器中查看时,较长的文本不适合按钮。有没有办法将按钮文本连字符?文本没有“空格”但下划线:“_”。
我有一个固定宽度的按钮。在此按钮中有一个<b>
带有名称的标签。名称是可变的,它可以比按钮的宽度长。
在浏览器中查看时,较长的文本不适合按钮。有没有办法将按钮文本连字符?文本没有“空格”但下划线:“_”。
您可以使用 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: "_";
}
您正在寻找的是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;
是的,您可以使用“连字符”CSS 属性来实现这一点。阅读更多关于 Word Hypernation
.button{
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
width:90px;
}
我猜您希望长文本出现在有限宽度的按钮中。先看看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>