Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide text going beyond DIV element

Tags:

html


I have a DIV element with fixed width having some text which doesn't have any spaces for HTML parser to automatically break into multiple lines. The text is going beyond the limit of the DIV and messing out the pgae:

  1. Is there anyway to make text going beyond the boundary invisible?
  2. Is it possible to break it into multiple lines, or -even better- break into multiple lines with a hypen at the end of each broken line?

Regards,
Rafid

like image 290
Rafid Avatar asked Dec 11 '10 11:12

Rafid


People also ask

How do I hide text-overflow?

A text-overflow property in CSS is used to specify that some text has overflown and hidden from view. The white-space property must be set to nowrap and the overflow property must be set to hidden. The overflowing content can be clipped, display an ellipsis ('…'), or display a custom string.

How will you hide extra text or content that goes outside of the area in CSS?

The default value of overflow is visible . With this default, we can see content when it overflows. To crop content when it overflows, you can set overflow: hidden . This does exactly what it says: it hides overflow.

Why is my text outside my div?

This type of problem occurs due to the following reasons, The height of the container may fixed, in this case you may set the height to auto or you may use min-height; If you want fixed height then you may set the overflow to scroll or hide. check the margin, padding and set the width properly.


2 Answers

You can do this with CSS.

Is there anyway to make text going beyond the boundary invisible?

Yep: overflow

#yourDivId {
    overflow: hidden;
}

Is it possible to break it into multiple lines

Yep: word-wrap

#yourDivId {
    word-wrap: break-word;
}
like image 151
Felix Kling Avatar answered Oct 20 '22 05:10

Felix Kling


The answer to your first question is to use the following style:

overflow: hidden;

Alternatively, if you want to be able to scroll in the div to see the content you can do

overflow: auto;

or

overflow: scroll;

To do what you ask in your second question you'd need some javascript.

like image 32
Andrew Cooper Avatar answered Oct 20 '22 04:10

Andrew Cooper