Question

Lets say I have a Label, Button, or TextArea object, that contains some amount of text. The way that things work by default is that text put in these objects will automatically word wrap around to the next line. Is there a way to disable this? I am aware that the CSS attribute

overflow : hidden ;

will stop the scrollbar from showing up. But is there a way to stop the text from going to the next line?

I wish it to be the case that if I have a string that is “wider” than the object it is placed within, it will simply write out the string to the limit of what the object can contain, without wrapping it to the next line? Anyone have a way of doing this?

Thank you.

Answer 1

You can use the following css definition to achieve this:

<style type="text/css">

.element {
        width:200px;
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space: nowrap;        
}

</style>

<div class="element">
This text will not wrap.  Hamina hamina hamina hamina hamina.
</div>

This should prevent any text from wrapping to the next line. If the text exceeds the width of the element, it cuts off. If you are using webkit / explorer you will get a nifty ellipsis effect where the text cuts off (to suggest that there is more text than is visible).

Unfortunately firefox does not support ellipsis. But the text will still cut off and will not wrap.

I haven’t tested this defintion with button or textarea elements – only with divs. But I see no reason it should not work. I leave it to you to experiment.