CODEWITHSUNDEEP
htmlbuttondelimiterword-wrap
d3pd
d3pd

Reputation: 8315

how wrap text that does not contain whitespace in HTML button

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.

Upvotes: 0

Views: 2666

Answers (2)

Robbie JW
Robbie JW

Reputation: 739

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.

Upvotes: 1

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201866

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 (&#x200b;) 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.

Upvotes: 0

Related Questions