I have a table that is being populated with different lengths of text. I have set the table-layout css property to fixed because it keeps pushing the table outside it's parent creating a horizontal scrollbar.
I want my td's to be exactly half of the table which will be full size of it's parent. I want my text to wrap inside the td's. Here is what it looks like:
I want the text to wrap around 20 so it doesn't overlap the other text. I can't use a <br />.
Here is a JSFiddle of the problem.
You could use word-wrap: break-word on the p. It worked in your jsFiddle, and it's compatible with IE as Microsoft developed it.
The reason that it is not breaking is because there is no spaces in the string. As soon as you add a space to the set of numbers it breaks. Therefore, one way to fix that would be to assign word-wrap:break-work to the p selector.
as you are setting container width smaller, try to increase container width, Check JSFiddle for demo, width 250 will break to the exact 20 position.
#container
{
width: 250px;
}
p
{
word-wrap: break-word
}
Related
So if I take a div and add this to it:
<div class="dongs">test</div>
<div class="dongs">test</div>
<div class="dongs">test</div>
.dongs {
background-color: blue;
max-width: 500px;
display: inline-block;
}
It will make the div's line up beside each other with a blue background BUT the max width will
appear to not be working for some reason.
The reason why I need max-width to work is because if I have those beside each other and lets say
a user comes a long with a small browser it will resize the div's and squish them in so that they
are smalled which is what max-width does. Allows the container to become smaller but not larger.
However, if I remove the inline-block; the div's wont be next to each other BUT the max-width
will work and they will resize. Please, I need help. Thanks
EDIT: I did research a lot but cannot seem to find the answer. I did see one stackoverflow post but
it did not make sense to me and didnt help. Here
You can achieve what you want by using the below code:
.dongs {
background-color: blue;
max-width: 33%;
display: inline-block;
}
Explanation: Since we are not setting any explicit width at start, the browser will assign the minimum width required to fit the contents of the element for all the elements (like you can see for the 2nd and 3rd div's the width is different based on content). However, setting the max-width: 33% means that the browser at any point of time would only allocate a maximum of 1/3rd of the parent element's (or body if no other parent) width to this element. So, if the content is anything more it would start wrapping around.
You would also want to set either overflow: hidden; or word-wrap: break-word; in addition. The first makes the overflowing content get hidden (would be helpful when they are very lengthy words) while the second break's lengthy words and then wraps it around to the next lines. Either one can be used depending on the needs.
Demo | W3C Spec for Min/Max Width
I believe it's because you haven't specify the actual width, and instead of using display: inline-block, it would be better to use float: left and add some margin if you need any space between those div. But, don't forget to change the width property.
Check out my JSFiddle...
i have a table in which there are several td's that contain link now problem is that my links are very long so i want those to take full width of td and then go to second line but it's not working
Demo
http://jsfiddle.net/6pyxB/1/
i tried using white-space:no-wrap; and it's fine in cases where link size is just equal to or less than the td height. but if link size is greater than td size it will extend the td width also that i don't want.
Demo After white-space:no-wrap
http://jsfiddle.net/6pyxB/2/
in this case i want that remaining link address go to second line instead increasing the size of div.
Please help me out
Try adding word-break to your stylesheet:
td {
word-break: break-all;
}
Evening front end wizards. I'm trying to do something that should be quite simple: I want to have images floated right or left in my body content, with a caption below each image. To try and achieve this I'm floating a div with the image inside it, followed by a span with a caption below. I've given the image max-width 100% so my layout is responsive.
Is there any way using just CSS and HTML that I can constrain the width of the containing div to the width of the image inside it? I'm finding that the span below pushes out the width of the div, whether it's display:inline-block or not. I'd like the span to always be the same width as the image, so the text wraps in line with the image's right edge.
I'd like to be able to use images of varying widths, so setting a max-width on the div doesn't really do the trick. I could do it easily enough with JQuery, but that would be cheating.
Any suggestions gratefully received! You can see what I'm talking about at http://jsfiddle.net/andfinally/yBHjK/
Try setting a max-width to the container and then width: 100% to the image. It should work.
Look http://jsfiddle.net/nMEVd/1/
It sounds like you want the containing div to expand it's width only for img elements and not span elements. Is that correct?
There is no pure CSS solution for this, JavaScript is the best way to achieve what you're after.
Two similar questions:
CSS: Force text to wrap (OR defining element width by only one of its children)
Limit text to the width of sibling image / auto width in CSS
You might want to try adding:
style="word-wrap: break-word;"
to the span elememt, or in a css sheet with:
.image span {
word-wrap: break-word;
}
Edit:
This should break the text in your span element to fit across two or more lines instead of stretching out past your image's width.
I have a list of div displayed on the same line. When the page is not wide enough to display all the div on the same line, I don't want extra div to be displayed on the next line. How can I avoid displaying extra div on a new line?
Here is a jsFiddle: http://jsfiddle.net/YCFZM/
Try to reduce width on the page and you'll see some div displayed on a new line.
Thanks.
Updated gist with solution: http://jsfiddle.net/Meligy/YCFZM/16/
Main changes:
Removed extra quote in HTML at id=""sidebar" which was breaking the gist
Removed height: 0px; from div#sidebar CSS
Added white-space:nowrap; to div#sidebar CSS
Removed float:left from div.sidebar-item CSS
Added white-space: nowrap; display:inline-block; to div.sidebar-item CSS
Optionally you can also remove text-align:center; from div#sidebar CSS if you meant to make the text be to the left.
In the style sheet use the display attribute with the inline value on the doc
As far as my knowledge goes the only solution to this is to have a fixed width for the container. Or to have an element in the container which has a fixed width
You need to set a min-width which is large enough to encompass the divs. Also, you had an extra quotation mark in your jsfiddle which was preventing your styling from being applied and for some reason the height property was set to 0. I've adapted your jsfiddle here to display the behaviour I think your after.
I have this:
http://jsfiddle.net/UHrLH/1/
I set the height on the box element to auto, but min-height is 200px;
Now if i try to make more content in the first box, the height expands but it creates a big white space under it. I do not want that, i want to have the box under eachother like you can see above, where the height on all boxes is 200px
See the issue here:
http://jsfiddle.net/UHrLH/2/
http://jsfiddle.net/chricholson/UHrLH/10/
This will give you boxes inline but unfortunately the pairs will not extend to match the height of it's partner. To do this you will need to use tables or a javscript overwrite to capture the height. Also, bear in mind display: inline-block will not work on divs in IE7 and below, it would work on a span though: http://www.quirksmode.org/css/display.html#t03
http://jsfiddle.net/UHrLH/11/
I have added an additional div if that is ok for you...
<div class="box_Container">