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
Related
I need to make <div> with specific max-width (for example 100px) and when this element contains some long words ( more then 100px) make it width-adaptable for these words, without word breaking or hiding overflow, just like on the attached picture.
Is this possible with pure HTML & CCS ?
Thanks for answers.
Well, first we have to make the <div> element shrink-to-fit. This can be achieved by floating the element or displaying it as an inline-block element.
Then, we can add a min-width of 100px to the element to set a minimum width.
For instance:
div {
display : inline-block;
min-width : 100px;
}
If you set a fix width on a div it won't be adaptable. You would have to use JavaScript to watch for text.
Alternatively don't use a fixed width but use min-width:100px and it will grow beyond 100 when needed but always be a minimum of 100px
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 div in my page. I set it's width to 500px. but sometimes it's content get space more than 500px. so I set it's min-width property to 500px.
it expect that is takes 500px by default and take longer according to it's content. but it takes whole of the page's width by default.
But if I replace the Div by a Table, it works correctly.
Does anybody know the reason?
Please see the demo.
Demo.
You have to set in css like
min-width: 200px;
width: auto;
float: left;
Normal block and things like tables, floats, inline blocks etc. use different algorithms of calculating width. For the normal block, the width is usually the available width of the container, and min-width is taken into account only if the container is narrower than it. For the latter things, the width algorithm is shrink-to-fit.
But there are several ways to make the normal div behave like a table.
I have this code here and I am trying to make the ul.submenu li to stretch according to its contents. As you can see, the 3rd li of the ul.submenu has a long text which hides instead of stretching the li.
I have tried changing the display property of all elements on the DOM with various combinations but I cannot get it right.
What am I doing wrong and why this happens? What am I missing?
Any help will be very much appreciated! :)
Currently the text has little bearing on the layout, because of block display and absolute positioning.
You can change this by giving the lis display: inline-block and white-space: nowrap. I've forked an example where the sub-menu is as long as the longest item requires.
Explanation
inline-block gives the element properties of inline and block display: inline in that the element should flow like text, and take its initial layout and dimensions from the text it contains. But the block part means you can also specify top and bottom padding and margin, clears, etc. Even with this set, the containing element is still absolutely positioned (most text content just flows as long as it needs because normally the containing block element fills 100% width - not the case for absolute, relative and fixed elements), so its instinct is to collapse to the minimum width, that of the first word. But if we use white-space: nowrap, we can force the text to extend as much as it needs, so the full sentence is used as the measure.
You could just change the min-width to:
min-width: 240px;
View Example
I am trying to create a horizontal menu with the elements represented by <span>'s. The menu itself (parent <div>) has a fixed width, but the elements number is always different.
I would like to have child <span>'s of the same width, independently of how many of them are there.
What I've done so far: added a float: left; style for every span and specified its percentage width (percents are more or less fine, as the server knows at the time of the page generation, how many menu items are there and could divide 100% by this number). This works, except for the case when we have a division remainder (like for 3 elements), in this case I have a one-pixel hole to the right of the parent <div>, and if I rounding the percents up, the last menu element is wrapped. I also don't really like style generation on the fly, but if there's no other solution, it's fine.
What else could I try?
It seems like this is a very common problem, however googling for "child elements of the same width" didn't help.
You might try a table with a fixed table layout. It should calculate the column widths without concerning itself with the cell contents.
table.ClassName {
table-layout: fixed
}
If you have a fixed width container, then you are losing some of the effectiveness of a percentage width child span.
For your case of 33% you could add a class to the first and every 4th child span to set the correct width as necessary.
<div>
<span class="first-in-row">/<span><span></span><span></span><span class="first-in-row"><span></span><span></span>...
</div>
where
.first-in-row { width:auto; /* or */ width:XXX px; }
have you tried the decimal values, like setting width to 33.33%?
As specified in the CSS syntax, the width property (http://www.w3.org/TR/CSS21/visudet.html#the-width-property) can be given as <percentage> (http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage), which is stated to be a <number>.
As said at the number definition (http://www.w3.org/TR/CSS21/syndata.html#value-def-number), there some value types that must be integers, and are stated as <integer>, and the others are real numbers, stated as <number>. The percentage is defined as <number>, not as <integer> so it might work.
It will depend on the browser's ability to solve this situation if it can't divide the parent's box by 3 without remaining, will it draw a 1- or 2-pixel space, or make 1 or 2 spans out of three wider than the rest.
In reference to Xian's answer, there's also the :first-child pseudo-element. Rather than having first-in-row class, you'd have this.
span:first-child {
width: auto;
}
Obviously, this is only applicable to a single line menu.