text hyphenation within a html button

Question

I have a Button with a fixed width. Within this button there is a <b> tag with the name in it. The name is variable and it can be longer than the width of the button.

When viewed in a browser, the longer text doesn't fit in the button. Is there a way to hyphenate the button text? The text doesn't have "spaces" but underscores: "_".

Is this you are looking for http://jsbin.com/jixoviqa/1/edit? — Kheema Pandey, Jun 30 '14 at 11:05
Do you want to show hyphen when a word breaks, or show it to indicate that some text is hidden..? and what do you mean by "within this button there is a tag with the name in it" ? what tag..? can you add some sample code and a better description..? hope the answer helps — T J, Jun 30 '14 at 11:25
Is it permissible to break the text after an underscore? And if you really mean hyphenation, is it OK to manually add hyphenation hints, or should you be able to do it programmatically? Is the language of the text in the button known? — Jukka K. Korpela, Jun 30 '14 at 12:23

score 0 · Answer 1 · answered Jun 30 '14 at 11:11

You can use css text-overflow property to specify a custom string to be used to represent clipped text. For example,

HTML

<div>
 some overflowing text
</div>

CSS

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

demo

Jacob G · Answer 2 · 2014-06-30T14:25:27.007

0

What you are looking for is text-overlow:'_';. To make overflowing text do this use the following CSS:

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

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

JSFiddle Demo
Ellipsis (...) can also be used by text-overlow:ellipsis;

edited Jun 30 '14 at 14:25

answered Jun 30 '14 at 11:12

Jacob G

13,762
3
47
67

score 0 · Answer 3 · answered Jun 30 '14 at 11:19

0

Yes you can achieve this using "hyphens" CSS property. Read More about Word Hypernation

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

DEMO

answered Jun 30 '14 at 11:19

Suresh Ponnukalai

13,820
5
34
54

Just to add, this is the browser compatibility for hyphens: http://caniuse.com/css-hyphens – wildandjam Jun 30 '14 at 11:22

score 0 · Accepted Answer · answered Jun 30 '14 at 11:31

I guess you want a long text appear in limited width button. have a look at DEMO First.

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>

text hyphenation within a html button

4 Answers4