Menu
I am not sure whether it is possible to use the text-overflow: ellipsis; style on a <button> element. Here is my attempt: http://jsfiddle.net/WilsonPage/tK727/
758
The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis (' … '), or display a custom string.
To force overflow to occur and ellipses to be applied, the author must apply the nowrap value to the white-space property on the element, or wrap the content in a <NOBR> tag.
The overflowing content can be clipped, display an ellipsis ('…'), or display a custom string. Syntax: text-overflow: clip|string|ellipsis|initial|inherit; Property Values: All the properties are described well with the example below.
The text-overflow property in CSS deals with situations where text is clipped when it overflows the element's box. It can be clipped (i.e. cut off, hidden), display an ellipsis ('…', Unicode Range Value U+2026) or display an author-defined string (no current browser support for author-defined strings).
Due to limitations in browsers, wrap the button text inside e.g. a span element and set the styles on it. Example (available as jsfiddle too):
<style> .buttontext { width: 95px; overflow: hidden; white-space: nowrap; display: block; text-overflow: ellipsis; } </style> <button><span class="buttontext">Very long text Very long text Very long text</span></button> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
