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=) )
Related
I have been researching and working so hard to fix such a strange problem. I have a div that is supposed to hold some text. This div should be able to resize with that text, so that if there are two lines of text the div gets taller, etc. All that seems to work fine, but for some reason there's some sort of padding added to the top of the text and to the bottom of the text. I can't find what is causing that padding, and I really want to make the div fit the text more compactly. Here is an image of what i'm talking about:
http://i.imgur.com/ZblaLJX.png
The light blue box should be shorter in height so it fits the text more closely. Here is my CSS code for this div:
.captionCSS {
max-width:70%;
margin-top:10px;
margin-bottom:20px;
padding-left:5px;
padding-right:5px;
padding-top:0px;
padding-bottom:0;
background-color:#aef7f8;
overflow:hidden;
color:black;
}
I have messed around with all of the margins and paddings, setting them to zero and then setting them back again and nothing seems to work. The line height is inherited from another div and is 18px, while the font size is 12px, and i tried decreasing the line height but it didn't have any effect on the top and bottom padding/gap.
Also, when the text takes up two lines, it get a bit worse in that there is an extra bit of padding on the side, which i want to get rid of:
http://i.imgur.com/Ecdxdtq.png
So yeah, that's my issue. Ideally I would like a 5px gap from the edge of the div to the top of the text, so if there is anyway to do that please let me know! Thanks so much for your help!
You might try the following.
If your code looks similar to this:
<p>Some text with <span class="captionCSS">highlighted text</span>.</p>
apply the following CSS rules:
p {
background-color: gray;
padding: 5px;
}
.captionCSS {
max-width:70%;
padding: 0 5px;
background-color:#aef7f8;
display: inline-block;
line-height: 1.00;
}
If you set display: inline-block to the caption wrapper, then the line height value will have some effect.
line-height: 1.00 forces the line height to be the same size as the font-size for the element. If you set the value to be less than 1, you will get a tighter fit but you may also clip ascenders and descenders of certain characters depending on the font.
See demo at: http://jsfiddle.net/audetwebdesign/2cyaF/
Without the HTML I can't be sure, but my first guess is that the text has a parent block level element that already has styling rules. (ex: <hX> or <p>)
You can clear those styles through css by doing something like this:
h1,h2,h3,p{
padding:0;
margin:0;
}
Here are some example cases using your style: http://jsfiddle.net/JTrWL/
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
I have horizontally stacked divs using the following code below:
.basic {
width:100px;
position:relative;
display:inline-block;
border: 1px solid red;
text-align:center;
margin:0;
padding:0;
}
#container {
white-space: nowrap;
border: 1px solid black;
width:300px;
overflow:auto;
}
The 'container' has white-space:nowrap for stacking it's children horizontally. However, the horizontal children have spaces to their right. Here's a fiddle showing the demo. Inspecting box layout there doesn't seem to be any margin/padding. But just some mysterious 'dark matter' pushing it out :P
The queer thing is that the same code is used at different places in my application but this anomaly shows up in one place as shown in the image below:
Don't worry about the garbled text on the top. I haven't rotated the div 90 degrees CCW as yet :)
However, pay attention to the bottom part of the image. The textbox divs are stuck to each other whereas the ones on the top aren't. They use the same CSS as above, but differ in structure. The top Div has two floats which are cleared by the div with the arrow towards the bottom. So no 'uncleared' floats there. Rather than posting the entire HTML/CSS I recreated the problem in the fiddle.
What I fail to understand is that even after having 0 margin/padding and display:inline-block for the child divs why is there still some space? I'm sure this has been asked quite a few times here but why would this happen once and not in another place? Besides, how best to 'fix it'??
display: inline-block places a margin to the right if there exists a whitespace between the current and the next element. This space is calculated as a product of 4px and the current font-size in ems. Notice the difference between the first and second rows in this fiddle: http://jsfiddle.net/MkasM/
In your case, this can be controlled simply by setting margin-right: -4px since you haven't changed the font-size.
More here: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Also, it is good practice to give your elements 'box-sizing: border-box' if you haven't already. It will contain the 'padding' and border-widths within the blocks so it wont interfere with the layout.
To read: http://paulirish.com/2012/box-sizing-border-box-ftw/
Currently, I am modifying a css document to make a website compatible in IE 6 and including it using a conditional statement. Everything is slowly starting to look as it should EXCEPT....I can't seem to modify the height of the background image in the css below. I can make it bigger by increasing the height, but decreasing the height does not make it smaller. The original image is quite thin, so I don't see why this is a problem.
#title{
text-align:left;
margin-left:170px;
margin-top:0px;
background-image:url(images/gradient.jpg);
background-repeat:repeat-y;
padding: 0px 0px 0px 0px;
width:680px;
height:42px;
color:white;
font-family:Helvetica, Georgia, "Times New Roman", Times, serif;
position:relative;
top:0px;
}
You can see in the attached image that the red gradient background image underneath the cork header image is too big and the text inside is too large also. However, no matter what I change in the css, it doesn't seem to alter anything.
Image of webpage
The div tag is:
<div id="title">
<h1>
Historia </h1>
</div>
Any thoughts as to why I can't seem to change this?
I would try first by using firebug lite for IE, that way at least you aren't guessing whats going wrong and you can identify the padding/height/etc;
My thought is that the height is simply being stretched by the h1 element (perhaps something else sneaking in too), thats my best guess as I don't have IE6 to test, but since your height is defined for the #title it must be whats inside of it that stretches it. Try setting overflow: hidden; for the #title see if that helps, or at least shows your 42px height.
http://bodegacooperativacigales.com/historianew.html
Try firebuglite, and view the element, it will show you what to get rid of in IE.
EDIT
to define your h1 simply do this:
#title{
text-align:left;
margin-left:170px;
margin-top:0px;
...
}
#title h1 {
height: 20px;
margin: 0; // remove margin
padding: 0; // remove padding to check if this is the issue
}
in your IE6 CSS sheet. Don't set a background image into the h1. The above piece is separate from your #title css definition.
I think you might be having issues regarding the height due to the child element creating overflow. Try adding the following rule to prevent the parent element from displaying any overflow:
#title {
overflow: hidden;
}
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?