This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed 6 years ago.
Firstly, apologies for the hard to understand question title.
In HTML/CSS, I want my multiple line text element to inherit it's width from the text inside. It does this if the contained text only spans one line, but when the text spans multiple lines, it forces itself to width:100%;.
Here's a fiddle of the problem: https://jsfiddle.net/guzvpe2q/
This is what happens:
This is what should happen:
Thanks in advance.
The div really is being pushed that wide by the text, but the text cannot fit so it needs to be pushed down a line.
You also need display:inline-block.
One way around it would be to add manual line-breaks after the first word (not exactly ideal i know)
See (https://www.w3.org/TR/CSS21/visudet.html#inlineblock-width)
Related
This question already has answers here:
Understanding CSS2.1 specification regarding height on inline-level boxes
(2 answers)
Vertical align not working on inline-block
(3 answers)
Inline elements and line-height
(2 answers)
Closed 9 months ago.
I know that an inline box does not occupy whole width. It only takes required width. While referring a book on CSS, I learned that an Inline Box consists: Content Area (which is equal to em boxes stacked next to each other horizontally) + Leading (which itself is equal to sum of Top and Bottom leading). The height of this box is the Line height.
Inline Box Diagram
For Line Box, the diagram shown is this:
Line Box Diagram
My main concern here is the definition of vertical-align says that (as per MDN docs: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) "..vertical-align only applies to inline, inline-block and table-cell elements: you can't use it to vertically align block-level elements."
Another use case says: ".....To vertically align an inline element's box inside its containing line box."
Here the last bold term is very confusing to me. I am not able to make sense out of it and not able to visualize what these two definition says. Can any body help me with this?
This question already has answers here:
Padding for Inline Elements
(3 answers)
Closed 2 years ago.
I'm just playing around with the border/content box CSS properties in the very early stages of learning.
Trying to make the two boxes line up next to one another- I've achieved it with using the float left and right properties.
However, when I use display inline, it causes an overlap with the above block element h1. I've displayed it as a table here, so the background colour I've set on it only spans the width of the content, but that shouldn't change the fact that it is still a block element.
More than the overlap, display: inline on the div causes the boxes to shrink in size as well.
Can anyone explain why this is happening?
Please see the code here: https://jsfiddle.net/gouvrze1/
Only block elements respect width and height rules. Inline elements just flow with their text content. The overlap is caused by the padding and the fact that the divs are further down in the DOM, so they're drawn after and on top of previous elements.
Try changing your divs to display: inline-block instead.
This question already has answers here:
Does width property affects clear?
(1 answer)
Why is text wrapping around a floating element instead of going belows like another div?
(1 answer)
floating elements behavior
(2 answers)
Closed 4 years ago.
I'm trying to understand how float works with different elements. The first example have 2 <div> which is floated to left with one of the div having some text. As expected, both are placed next to each other horizontally.
Example 1
The second example have the same setup except that the last <div> with text is not floated to left. Now, I was expecting that <div> to go underneath the first floated <div>. But, the result is different. The second <div> went beneath the first <div> but the text is placed under the first <div>.
Example 2
Can anyone explain me what's happening?
Because overflow happens for yellow div and default is overflow: visible, text inside the yellow div creates a new block formatting context.
Overflow docs
Block formatting context
This question already has answers here:
How to automatically change the text size inside a div?
(9 answers)
Closed 5 years ago.
I have responsive boxes (divs) containing dynamic texts.
The texts are normally short enough to fit in the boxes but sometimes some of them are larger and don't fit.
I'm trying to resolve this issue truncating the texts with text-overflow: ellipsis but this is not ideal because info is lost.
Media queries break points don't help either because they affect the whole page and not only the boxes with long texts.
How would you make a non-fitting text responsive so its size is reduced automatically to fit in its holder box?
I was looking to achieve it too, but i only found a good working Js to do so. Can you take a look on it fittext.js
If you have not set the height of the divs, then the text inside them will only increase the size of the divs but will not go out of them.
if you are trying to truncate why not use overflow: hidden.
Alternatively, you can create a class targeting the divs who you suspect might contain long text and make them have em value as size. Instead of px
One Possible solution is to keep width and height of parent element in percentages and then make child element as inline blocks. This is not the perfect solution at very low resolutions, but will work in your case.
.parent{
width: 20%;
height: 20%;
}
.child{
display: inline-block;
}
This question already has answers here:
How to get this 2 columns layout (were one fits to content)
(3 answers)
Closed 4 months ago.
The columns should:
be full height
have vertical scrollbars if needed but no horizontal
This is what I got so far (along with a footer and a header)
http://jsfiddle.net/HZMCX/11/
The problem withmy code is that the right panel text starts at mid screen and not next to the left panel.
[Ignore this, this is so stackoverflow allows me to post the link to jsFiddle ]
Any ideas on how to fix this?
Thanks!
Your code can be applied much more simply than you currently have it:
Consider simply floating the side column and the primary content and setting fluid widths on both.
http://jsfiddle.net/MygUu/
Wrap the overall layout in a .container class, and set overflow to hidden.
.container {
overflow: hidden;
}
Additionally, it is best practice not to style using ID selectors. Hope that helps.