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;
}
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 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
}
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.
Look at this fiddle: http://jsfiddle.net/guard/UtpGm/
The w is a wrapper, having both min- and max-width.
The title inside it has a long text inside.
As far as I understand the following happens
the wrapper span/div/whatever (tried both div and span with both block and inline-block display mode) first tries to occupy as much width as it can, and calculates the width sufficient to have the title on a single line (for the sample its 483px)
then the width is compared to the min amd max widths specified, and adjusted - in this case its decreased down to 380px
As a result there's unused space inside of the wrapper.
How can I make it occupy "as few space as possible" for the content to fit (to look the same, but without the unused space), given both the min and max width constraints? In the sample case the proper width is 312px.
Note: I can do really anything with the wrapper. It can be positioned absolutely or relatively, it can be child of any other element, any additional wrappers can be added.
Here's the first solution that comes to my mind that works:
$('#w').css({"width": $('#title').width()});
The fiddle: http://jsfiddle.net/UtpGm/9/
Of course, one would prefer a pure-CSS approach, so I would love to see other answers.
There is no such kind of width calculation in CSS.
The only thing that is close enough in CSS for the moment is to use display:table-cell :
http://jsfiddle.net/UtpGm/13/
When you define table-cell its width:auto value is resolved to
width:max-content-width. Here max-content-width is an internal value that equals to intrinsic max width of the content.
For <p> element its intrinsic max width will be equal to the width of its text when it is replaced in single line. And if <p> has <br>s inside - to longest line.
for some reason this worked:
#w {
border: 1px solid red;
min-width: 10px;
max-width:380px
width: auto !important;
display: inline-block;
}
#title{ max-width:380px; display: inline-block;}
Also bear in mind that some of your sample text ie"longlonglonglong" counts as one word because there are no spaces, so it will automatically jump down to the next line if it can't fit on that line and cause a white-space in the span.
Hope this helps, cheers