Stop text from over running it container

Question

Ive got a container of into which a message gets echoed, the message its self has no fixed size, as its user generated, what can happen though is that if a string of text that is too long is submitted it can over flow its container an break the design..

Is there a way (hopefully with just css, although js is ok) to make the box crop the text and leave it with a ... then i can place a link to the text on another page.

You can obviously stop this happening by using overflow:hidden, but i would like a more elegenat approach rather than just cutting it straight off. I seem to remeber reading about somthing like this with css3, but for the life of me cant figure out what it was called.

Ive made a jsfiddle of the problem here - http://jsfiddle.net/6Fk7B/

Good question/idea! I never thought about a CSS solution. But created several JavaScript solutions... — powtac, May 14 '13 at 18:56
possible duplicate, http://stackoverflow.com/questions/536814/insert-ellipsis-into-html-tag-if-content-too-wide handling with just css is not going to allow you to do the linking the ellipsis. — Jose Vega, May 14 '13 at 19:06
Agree - CSS alone is not going to give you the functionality to add the content to a separate page. Is it not possible to deliver only a set number of characters server-side? — Doug, May 14 '13 at 19:19

score 1 · Accepted Answer · answered May 14 '13 at 18:55

1

CSS property text-overflow:ellipsis, though browser support varies

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

answered May 14 '13 at 18:55

Christopher Marshall

10,678
10
55
94

score 1 · Answer 2 · answered May 14 '13 at 18:58

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

That should do it for you. All need to be included.

You may also want to include the following browser prefixes:

-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;

It won't be perfect in all browsers, but it should be good for most: http://caniuse.com/#feat=text-overflow

zxbEPREF · Answer 3 · 2013-05-14T19:40:19.190

0

Using JavaScript you could achieve this using substring. jQuery isn't necessary, but it makes it a tad easier.

var myText = $('.myBox').text(), 
maxLength = 250, 
more = '...';

if (myText.length > maxLength) {
    myText = myText.substring(0, 250);

    $('.myBox p').text(myText + more);
}

See my example example: http://jsfiddle.net/clrux/6Fk7B/14/

edited May 14 '13 at 19:40

answered May 14 '13 at 19:00

zxbEPREF

202
1
8

score 0 · Answer 4 · answered May 14 '13 at 19:06

You might want to tryout http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/ The actual code is here http://codepen.io/romanrudenko/pen/ymHFh

Honestly it's tricky to put ellipsis for a paragraph but pretty straight-forward for single line text.

score 0 · Answer 5 · answered May 14 '13 at 19:38

Is this a reasonable starting point for you?

Fiddle: http://jsfiddle.net/QkugN/

Basically you add all the content to the div and hide it using the normal method of overflow:hidden. You also add a tab that, upon hover, displays the rest of the content. If you use absolute positioning for the mouseover state the content will momentarily be removed from the flow and be allowed to overlay any surrounding content. It might not be a complete solution as it stands but it is a pure CSS direction you could explore.

The bit that's doing the business is the General Sibling selector "~" (tilde). Support for it is pretty solid with modern browsers.

Stop text from over running it container

5 Answers5