how wrap text that does not contain whitespace in HTML button

Question

I am creating HTML buttons automatically. An representative button created in this automatic way is as follows:

<input type="button" value="Expected_Performance_of_the_ATLAS_Experiment,_Vol._3.pdf" onclick="location.href='Expected_Performance_of_the_ATLAS_Experiment,_Vol._3.pdf';"><br>

The file names and whatnot can become quite long, so I need to implement wrapping of the button text. I am aware of the trick involving the use of the CSS property white-space (e.g.

style="width: 600 px;
 white-space: normal;"

), but this is not of great assistance when dealing with the file names I am using. Is there an approach which would feature more detailed delimiting options (perhaps whitespace could be given highest priority, underscores given the next highest priority and so on)? Is there a different approach that makes more sense? I thank you for any ideas you may have.

From a UI perspective, why not have the file name as a label above/beside the button and just change the button text to be "download" or "Open"? This will stop the need for having such long file names displayed on a button and trying to perform CSS 'tricks'. — Tanner, Aug 08 '13 at 11:28

Robbie JW · Accepted Answer · 2013-08-08T20:09:52.257

1

Edit: In Firefox this doesn't work, however, it does work if you apply it to a <button> element instead of an <input type="button"> element.

Updated jsFiddle

You might consider using the CSS property word-wrap:break-word;. This forces text to wrap, regardless of whether it has white space or not.

~~jsFiddle~~ (see edit)

(Source)

As far as I'm aware, there is no CSS property to give priorities to different delimiters in text. This would probably have to be achieved somehow with JavaScript.

edited Aug 08 '13 at 20:09

answered Aug 08 '13 at 12:29

Robbie JW

729
1
9
22

1

This is a functional solution. Thank you very much! – d3pd Aug 08 '13 at 14:12
The jsfiddle does not work on Firefox (the string is just truncated). Even when `word-wrap:break-word` works, it breaks a string at arbitrary points. – Jukka K. Korpela Aug 08 '13 at 20:00
@JukkaK.Korpela I've added an edit - it seems to work fine when using a ` – Robbie JW Aug 08 '13 at 20:10

score 0 · Answer 2 · answered Aug 08 '13 at 20:09

You cannot specify line break behavior with any accuracy in CSS. It’s basically under the control of the browser, and it varies by browser. Theoretically, you could insert U+200B ZERO WIDTH SPACE characters into the attribute, but they don’t seem to be honored by browsers (probably because button text rendering is different from normal text rendering).

As @Tanner suggests, it’s a better approach to put the file name outside the button, keeping the button text very short. This is good for usability. And if you have line breaking issues with the file name, they can be much better addressed when the file name appears as normal text; e.g., U+200B () works pretty well in specifying allowed breaking points.

Alternatively, just make the file names links, as this is what the button would really be used for, except that the button technique, as used here, does not work when JavaScript is disabled. If desired, you can style links much like buttons with CSS – the content will still be text where line breaking issues are more tractable than in button texts.

how wrap text that does not contain whitespace in HTML button

2 Answers2