A div that does not overflow - css

I have a div that will hold some text. The width of the div is fixed in pixels. I want to make sure that if the text takes more space than one line in the div, the text does not overflow and does not wrap to a second line. I just want it to show as much as fits the width of the div on one line. I have been experimenting with
{
overflow:hidden;
height:1em;
width:160px;
}
and it sometimes works, but I don't have the right height. What would be the right height? There is probably a better way to do this. Please let me know. Thanks!
Thanks everyone for your contributions. Here is what worked for me:
for a div:
{
height:1.2em;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
note that both text-overflow:ellipsis; and white-space:nowrap; need to be there for the ellipsis to show.
And for a span note that spans don't have a width so you need to add:
{
display:inline-block;
width:160px;
}
for spans to work

overflow:hidden;
height:1em;
width:160px;
text-overflow: ellipsis;
line-height: 1em;
Will add an ellipsis to text if it overflows the enclosing div and set the div to only use 1em, the height of the container.

white-space: no-wrap will prevent a wrap of the text.

{
white-space:nowrap;
overflow:hidden;
height:1em;
width:160px;
}

Set the line height for the paragraph, then set the div height to be the same.
Just note that text is usually taller than 1 em, 1.3 or 1.4 is usually better.
Try it out here: http://jsfiddle.net/PYA3y/
#mydiv{
overflow:hidden;
height:1.4em;
width:160px;
}
#mydiv p{line-height:1.4em;}
Edit:
in the time I wrote my reply, you got 3 other answers!
Scott had a good idea for using the ellipsis, I've updated the JSFiddle to include it (although it doesn't work??)
If I understand correctly, setting white-space will not give you the result you require... you do want the extra text to be hidden, don't you?

Related

CSS white-space: nowrap causes container to expand to fit all text

I'm experiencing a very strange behavior in which a an element with overflow: hidden, white-space: nowrap, and a width: 50% forces its containing element to expand to fit all the text even though it is constrained by the width declaration (and not actually visible). Setting a specific width on the container or using overflow: hidden also does nothing to help. Setting an absolute value as width for the element in question however, fixes the problem, but i do not want to use absolute values.
Example: http://jsbin.com/loxuz/3 (Yellow box should only be 50% of grey box, but is expanding to fit all of the text in the blue box, even though that is restricted in width.)
Does anyone see anything obviously wrong here? Should the containing elements have a width, and could it have anything to do with the fact that I'm using percentages? I don’t feel that could be the case as the width should be inherited from containers upwards, right? And not be dictated form text elements downwards. The only explanation I can find is that white-space: nowrap is causing this. Removing this gives the container the right width, but also causes wrapping of the text, which I don’t want.
Does anyone know a solution to this, or have any insight? :)
A quick workaround for the issue with fieldsets not respecting the specified width is to add a min-width: 0 to the element:
i.e.
fieldset {
min-width: 0;
}
Is this what you want? DEMO: http://jsbin.com/tifefase/1/. You should remove max-width: 50% from span and write width: 50% for #second div. This is the answer you are looking for if you want to use fieldset.
#second {
width:50%;
border:yellow 1px solid;
}
span {
overflow:hidden;
white-space:nowrap;
outline:blue 1px solid;
display:block;
}
But if you use div instead of fieldset, You can carry on with your current values. SEE THE NEW DEMO with div being used instead of fieldset.
#second {
width:50%;
}
#third {
width:100%;
border:yellow 1px solid;
}

How to avoid overflow?(put overflow on a new line)

I want to stop a div from overflowing. Currently it's overflowing to the right when there's no <br>'s until the div ends.
I don't want to create any scrollbars. Just want to break the line when it reaches the end of the div.
the CSS Div
#blog
{
border:#FFFFFF solid;
color:#FFFFFF;
width:760px;
min-height:100px;
border-color:#FFF;
border-width:thin;
float:left;
display: inline;
position:static;
z-index:1;
font-family: 'Quattrocento', serif;
background:#454545;
overflow:inherit;
}
I have messed around with the overflow property for some time now and i don't know what to enter into it to do what i want(or is it even possible)
I think
word-wrap:break-word;
Is what you need
DEMO
Depending on the content, these options are applicable:
white-space: preline or normal. Actually, normal is the default one, it makes all extra spaces disappear and continue a text from a new line, when it meets the current line end. The lines are broken between words. Works nearly everywhere.
word-wrap: break-word - this time, long words will be broken, if they don't fit into a line. Works nearly everywhere (and in Opera 10.5 and higher=) )

div container: limit to text going on one line to right

I tried adjusting the width in several places of my CSS, but the text keeps on flowing on one line and doesn't wrap within a "leftsidebar". There seems to be no limit as to how far my text goes to the right, and I want there to be a limit. How do I set that in CSS?
<h3> JKHJKHJKHKJHJKHJKHJKHKJHJKHJKHKJH</h3>
#leftsidebar {
position:fixed;
width: 160px;
top:150px;
margin:0px;
line-height:165%;
white-space:nowrap;
z-index:50;
padding: 0px 35px;
}
http://jsfiddle.net/4uxcN/
Remove white-space:nowrap; (and eventually add word-wrap: break-word; to respect your div boundaries with your no-spaced long word) to send the text to new lines;
add overflow-x: scroll; if you instead want the text in one single line but want to have an horizontal scrollbar inside your fixed width div: http://jsfiddle.net/4uxcN/10/
If you're talking about word-wrap: break-word property it will break the word when it reaches the end of the parent width.
Remove {white-space:nowrap;}, which forces your text to one line and add {word-wrap: break-word} to deal with your very long word.
http://jsfiddle.net/4uxcN/6/
#leftsidebar {
word-wrap: break-word;
}
Basically, there are 3 ways you can do it:
Just remove your white-space property. LINK
Remove white-space property, and add word-wrap: break-word; property. LINK
Set you white-space to pre-wrap instead of nowrap. LINK
If you remove
white-space:nowrap;
All text will break at the spaces to fit within the box width.
Super long strings like the one in you example will not break. To force stupid long strings to break you can use.
word-wrap:break-word;
also you could use an overflow property Like
overflow:scroll
It just really depends on the layout you are going for

CSS Float Images, Remove margin each line

Im trying to align multiple Images or DIVs.
i get the content from wordpress.
#wrapper{
width:800px;
}
.image{
width:125px;
height:100px;
float:left;
margin-left:10px;
}
This causes the last image to go to the next line.
i found
#wrapper div:first-child{
margin-left:0px;
}
helps me with the first line but the next lines are "broken" again.
how can i align 6 images in a row with ^n Pictures?
That's indeed a common design problem. I used to fix it by adding 10px to the container, but nowadays I always use a jQuery fix:
$("#wrapper .image:nth-child(6n+1)").find('img').css('margin-left','0');
See jsfiddle here
Or you could do it CSS only, but this will only work in real browsers (not in <=IE8)
.image:nth-child(6n+1) {
margin-left:0px;
}
See jsfiddle here
Sounds like the total width of the images, padding and margin are too wide for your container width. Try increasing the container width to confirm this.

Why isn't my div using automatic width?

http://www.e-fluential.com/offline/
Screen grab:
I can't get the div that the blue words blah blah is in to be automatic width, its just going full width from the margin i've set..
.titlesmedium {
font-family: title_font;
letter-spacing: -1px;
font-size:30px;
margin-left: 340px;
margin-top:-5px;
color:#00C3FA;
border-bottom: solid 1px #00C3FA;
}
Than you have to have on it:
display:block;
float:left;
be careful to clear the paragraph text.
Or:
display:inline;
margin-left:0;
Automatic width for a div will be 100% minus any margins or padding you set.
If you want it to be an explicit width you will have to set that value.
maybe width:auto will change that?
Also try display:inline;
First I think most answers are correct from what I can Read. (display: inline) But i think you should reconsider how you do this. You have margin left: 340px on your header. I guess u have the same on your paragraph to? It works.
But I think you should divide everything in to i.e. articles (or DIV) and just have a left and right column in this Article area. Then you don´t need to set all these specific margins etc on each element.
Also you should reconsider have paragraphs and headings instead of DIV in your HTML.
Also, there is no need for "titlesmedium" if you have .
article.anygoodname h1{ ...
article.anygoodname p{ ....
etc
Good luck!

Resources