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: "_";
}

demo

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
省略号（...）也可以由text-overlow:ellipsis;

使用

Answer 3

是的，您可以使用“连字符”CSS属性来实现此目的。 Read More about Word Hypernation

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

DEMO

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>

html按钮内的文本连字符

4 个答案: