I have a div element that covers the whole width of the window and a label inside of it. The label gets changed dynamically and sometimes the text inside it goes beyond the boundaries of the div. There is an example:
http://jsfiddle.net/VWNKC/
I tried with the:
white-space: nowrap
on both div and label but it just didn't work.
I am just wondering if it is possible to shrink the text inside the label so it fits the width of the parent div.
You can see that the label goes beyond the div if you scroll and try to select something after the end of the blue background of the div. There is still content.
EDIT:
I am not trying to shrink the text but to show parts of its content, Lets say the beggining of the text. I am not trying to change the size of the font, I just want to show the part of the text that fits inside the div.
It seems you want the label to wrap inside the parent container?
In that case white-space: nowrap will not work, that will just cause the label text to go beyond the parent container's boundary without wrapping to the next line.
So there are two ways you could do this, either have the text wrap to the next line so that the label remains within the width of the div, or have it gracefully truncate by using the following CSS Properties:
text-overflow: ellipsis;
overflow: hidden;
Related
I have a div element that is supposed to be a horizontal main menu. I used a ul and its lis as menu items. lis are inline-block so they make a horizontal menu. I set the div's width to 100 percent but I didn't set any height for the div, so its height is defined by its paddings, borders and contents. Now I want to fix its height to whatever it is (without directly defining), so I can use overflow to hide overflowed menu items on smaller screen sizes. I think it would be good for responsive designs. Can it be done with pure CSS?
Currently, as I make the browser's width smaller, menu items pile up, make more than 1 row of menu items and force the div's height to fit. I want to see only the first row of menu items.
You can ensure the contents of the div stay on one line using the css
white-space: nowrap;
If you want multiple lines, you can do something like
max-height: 3em; (or whatever value is appropriate)
Beware of how the overflowing content looks as it spills out of the element, it may abruptly clip out of view and look a bit nasty. If it is just text you can use
text-overflow: ellipsis;
But if you are dealing with actual elements, it's more complex! It's possible to create nice fades using only css and pseudo elements though, that's what I would do.
This is live demo: http://jsfiddle.net/9Y7Cm/5/
Everything is fine with that, until the text width there is higher than the div width.
If you will add some text there, the line will break and the text will be displayed under of the image instead of next to the image (as you can see in my first fiddle).
Here you can see what happends, it text width is higher than div container width:
http://jsfiddle.net/9Y7Cm/12/
Is there a way to fix that?
Give your right side content a width and float it to the right, like so:
http://jsfiddle.net/9Y7Cm/14/
For a cleaner result, i suggest you separate both sides of your content, left and right, with a class and width and then float them to set them side by side.
Just remove display:inline-block; from the CSS for the span element (jsFiddle example).
More information on display:inline-block.
inline-block: This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
The problem is with display:inline-block for the span. Remove it, and the text will be on the same line
In my project, I need to implement a container div that should have an unknown (unlimited) width, without breaking to a new line if its width overflows through the browser's window.
The container div has the CSS property of (white-space: nowrap; display:inline;) and the components inside this div has (float:left) CSS property. All widths are set statically. To test the behaviour, i used a button that calls a javascript function that appends a component inside the container div.
The problem is that when the total width of the container div increased to more than the browser's window width, the components inside the container div will break to a new line. I wonder whether it is possible to have a div with unlimited width?
Many Thanks..
The white-space: nowrap property does not apply to floated elements. Simply put, when you float an element to the left or right, there is no white space between them.
See white-space (CSS property) for more information on what white space is and the line that specifically states you can't do this with floats.
Try setting them to display: inline-block so that the parent actually considers them to be content.
Try adding a specific height to the container div, or removing the float: left rule from the components inside the div.
I'm dealing with a text who goes out of its div. I've coded the frontpage. So, no matter how long the main content is, it should force the sub-content (the grey area and the footer) to move down.
You see how the dummy text is acting
URL http://nicejob.is/clients/pizzahollin/www/divproblem.htm
I've accomplish this before but somehow it's not working now.
You've set an explicit height on that div. For it to reshape itself to its content, you'll need to set height:auto. (or never set its height in the first place)
EDIT: As ANeve said, you'll need to remove the height on both .article and .opentext, as well you'll need to put a clear:left on .lower-container to push the footer down.
If you have an element that only contains floating elements, the container's height will be zero. To fix this you can add a clearing div (<div style="clear:both"></div>).
If you add a clearing div at the end of the #under-content section, it will automatically adjust the height of the section to it's contents.
The other issue you have is that you are using relative positioning on your .opentext div elements. When you set a 'top' property, it actually pushes the content down, causing it to overlap with your #lower-container. You're better off using the 'margin-top' property, which will expand the size the .opentext div to fit all the contents.
So in short:
Add <div style="clear:both"></div> at the end of the #under-content <section>
Change the 'top:82px' to 'margin-top:82px' on your .opentext div
I hope this helps!
Just use wordwrap: break-word; for the div and it will break the word to the next line.
You have set the height property of your .article and .opentext divs. If you remove this property, the content should expand accordingly.
However, you will also need to adjust the positioning of your background image. You should set the background image of .footer itself, rather than relying on one statically-sized background image for the entire page.
I have noticed this bug several times when programming and wonder if anybody has a work around. When I create a CSS table using the display:table property, if one of my cells contains an IMG as the first element, the text in the adjacent cell begins below that image's height. If I put any text before the image tag, then the text in the next cell displays normally.
I have also noticed that if the display property of the IMG is block, then the text in the next cell begins below the image, but if the IMG is set to display:inline, then the text next door aligns it's baseline with the baseline of the image.
Ideally, I would like all content to begin at the top of each cell, and sometimes I would like to start a column with an image.
When I create a CSS table using the display:table property
You're having this problem because the default vertical-align is baseline for divs (which I assume you're using).
To fix it, simply also specify vertical-align: top on whatever has display: table-cell.