Filling a box with text that exceeds its limit

Question

I need to make a box that have a locked height and width. If the text content exceeds the height of the box, I'd would like it to automatically get shortened.

like this:

<div style="height:100px; width:100px; border:solid 1px #000;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque gravida augue, in luctus nibh feugiat et. In lacinia.
</div>

how should the text be shortenend? – Pankrates Jan 12 '13 at 21:25 — Pankrates, Jan 12 '13 at 21:25

score 2 · Answer 1 · edited May 23 '17 at 12:18

2

The CSS statement you're looking for is probably:

text-overflow: ellipsis;

Which shortens the text with an ellipsis (…), quirksmode.org has an example.

For multi-line blocks, refer to this Stack Overflow question.

edited May 23 '17 at 12:18

Community

1
1

answered Jan 12 '13 at 21:25

praseodym

2,134
15
29

How does this work for multiple lines, I have never got it work for more than one line of text? Please see this fiddle. http://jsfiddle.net/RhXnv/ – dev Jan 12 '13 at 21:33
See http://stackoverflow.com/questions/6222616/with-css-use-for-overflowed-block-of-multi-lines for that. – praseodym Jan 12 '13 at 21:36
I didn't think it was possible with just css alone, so the text-overflow option is no good as the above question is for multiple lines. – dev Jan 12 '13 at 21:38

dev · Answer 2 · 2013-01-12T21:43:47.890

0

I had this issue a while back and while text-overflow:ellipsis; works great for single lined text for multiple lines where you want to restrict the height too I found the ThreeDot jquery plugin great for multi lined text with lots more options.

And also the dotdotdot plugin.

edited Jan 12 '13 at 21:43

answered Jan 12 '13 at 21:27

dev

3,969
3
24
36

score 0 · Answer 3 · answered Jan 12 '13 at 21:28

0

This is what the overflow CSS property is for, you can see examples of it [on QuirksMode].1

Without knowing how you want the text to be shortened can't give you any example's I'm afraid.

answered Jan 12 '13 at 21:28

tim.baker

3,109
6
27
51

score 0 · Answer 4 · answered Jan 12 '13 at 21:32

If you want to truncate the user input to a fixed length use the following
The example creates a textarea which limited the user input to 100 characters and also displays to the user remaining count.

Step 1 - Create Function

Insert the following code into the page head:

<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } else {
        limitCount.value = limitNum - limitField.value.length;
    }
}
</script>

Step 2 - Create Text Area

Use the following code to create the form and text area (if necessary, change the name of the form and text area to suit your needs):

<form name="myform">
<textarea name="limitedtextarea" onKeyDown="limitText(this.form.limitedtextarea,this.form.countdown,100);" 
onKeyUp="limitText(this.form.limitedtextarea,this.form.countdown,100);">
</textarea><br>
<font size="1">(Maximum characters: 100)<br>
You have <input readonly type="text" name="countdown" size="3" value="100"> characters left.</font>
</form>

if you wish to apply this to a text box instead just follow this link

Filling a box with text that exceeds its limit

4 Answers4