not able to do max width

Question

I have a page which has a content like this...

<div id="content">
testingtestingtestingtestingtestingtestingtestingtestingtesting
testingtestingtestingtestingtestingtestingtestingtesting
testingtestingtestingtestingtesting
</div>

How do i apply a max-width on it . I m using this code in the css

#content {
    max-width:50px; /* for standards-compliant browsers */
   /*width:expression(document.body.clientwidth > 650? "650px": "auto" );*/ 
   /* max-width expression for IE only */
}

but i m not getting the results in firefox... http://pradyut.dyndns.org/WebApplicationSecurity/width.jsp

Are there any JavaScript solutions?
Any help
thanks
Pradyut

If you go to http://www.css3.com/, in the middle column, you should see a list of the current set of CSS tags up to CSS Level 3. — kafuchau, Mar 24 '10 at 21:17

score 25 · Answer 1 · answered Mar 24 '10 at 20:53

25

Well the reason why you not getting the expected result on the page you provided by the link is that you are using a span instead of a div.

Add

display: block;

to you style.

answered Mar 24 '10 at 20:53

AxelEckenberger

16,628
3
48
70

score 15 · Answer 2 · answered Sep 23 '14 at 16:45

15

#content {
    max-width: 50px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

You may like to remove display: inline-block; depending on the context of your element.

answered Sep 23 '14 at 16:45

ekerner

5,650
1
37
31

What is the use of ellipsis? – Pradyut Bhattacharya Sep 23 '14 at 18:03
It truncates the text, and replaces the last 3 characters with periods, like: This is some truncated t... – ekerner Sep 23 '14 at 21:03
1

@ekerner it replaces the text with the single character '…' & should only replace as many characters as necessary (… need only replace ww in 'awww') – Demur Rumed Mar 24 '18 at 05:06
1

Thanks, the inline-block is very importang. – ramwin Apr 13 '18 at 10:22

score 14 · Accepted Answer · edited Mar 24 '10 at 21:15

14

So, in your CSS, you can set the word-wrap property to break-word so that your string of text (w/ no whitespace) will be made to fit into the max-width:

E.g.

<style type="text/css">

#content {
    max-width: 50px;
    word-wrap: break-word;
}

</style>

edited Mar 24 '10 at 21:15

Josh Lee

171,072
38
269
275

answered Mar 24 '10 at 21:10

kafuchau

5,573
7
33
38

FYI, word-wrap is a CSS3 style tag, so it may not validate w/ current validators; but, I believe most browsers support the tag. – kafuchau Mar 24 '10 at 21:14
thanks for the help...really appreciate if you can share a link to the latest in css.. – Pradyut Bhattacharya Mar 24 '10 at 21:14
5

With a `` it will also need `display:block` or `display:inline-block` – ashleedawg Jan 11 '19 at 18:06

score 6 · Answer 4 · answered Mar 24 '10 at 20:56

6

If you used your own example you would find that it works just fine. The page you linked to uses a span element, which is an inline element by default. Inline elements cannot have width or height. If you want to set max width on a span element, set it's display to block or inline-block:

<span id="content" style="max-width:50px; display:block;" >  
testingtestingtestingtestingtestingtestingtestingtestingtesting  
testingtestingtestingtestingtestingtestingtestingtesting  
testingtestingtestingtestingtesting  
</span>

answered Mar 24 '10 at 20:56

Andy E

338,112
86
474
445

well changed the page... still the same... please help – Pradyut Bhattacharya Mar 24 '10 at 21:02
well there are no line breaks in the whole line "testing...testing" your page contains line breaks... please help... – Pradyut Bhattacharya Mar 24 '10 at 21:03

score -2 · Answer 5 · edited Aug 28 '20 at 00:16

-2

Add spaces in between. I believe this occurs because css/html reads it as one word. eg..

<span id="content" style="max-width:50px; display:block;" >  
testing testing testing testing testing testing testing testing testing  
testing testing testing testing testing testing testing testing  
testing testing testing testing testing  
</span>

edited Aug 28 '20 at 00:16

Martijn Pieters

1,048,767
296
4,058
3,343

answered Aug 27 '20 at 23:35

Ken X

1

not able to do max width

5 Answers5

Linked