I have a single-line fixed-width container div with two variable-width span inside. Any overflow of the first span should be hidden with an ellipsis. The second span floats on the right and should be shown in full. Please see this Fiddle:
<div class='container'>
<span class='left'>Long long variable stuff</span>
<span class='right'>Changing stuff</span>
</div>
I want the first span's width to dynamically adjust according to the width of the second span so that both span stay on the same line. How can I do that?
You can use Flexbox, so with flex: 1 on .right, .left will adjust its size and overflow will be hidden.
.container {
width: 200px;
display: flex;
border: 1px solid black;
}
.left {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.right {
flex: 1;
white-space: nowrap;
}
<div class='container'>
<span class='left'>Long long variable stuff</span>
<span class='right'>Changing stuff</span>
</div>
I don't think there's any way for CSS to dynamically know the length of an element without javascript. If you're looking for a purely CSS solution you're going to need to give it some direction in order for it to know the widths you want. Visually, that might be a bit of a compromise for you, but it will allow you to ensure that everything is always on one line.
For the solution I'm about to propose to work you need to know one width of the two. In this case I'm going to say that you can make a best guess of the "changing stuff" on the right.
Your first problem is that spans are inline elements by default - not inline-block. In order to get the overflow text property to work, you need to use it with an inline-block or block element.
The next piece is to use calc. Calc excepts mixed measurements so you can subtract an exact pixel value off of a percent. This works really well for responsive layouts.
I've created an updated version of your plunker to illustrate:
https://jsfiddle.net/n19ddahb/5/
Related
I'm having a problem getting long lines of text to correctly break and wrap in a chat feature that I'm working on. The HTML below is the relevant set of nested elements, but the crux of the biscuit is with .chat__messages__item and .chat__messages__body (the whole block below is inside of an element that is set to 24vw, so it is all intended to be window-width-responsive).
First off, here's the HTML/CSS...
<style>
.chat__messages__inner{
display: table;
height: 100%;
width: 100%;
}
.chat__messages__list {
display: table-cell;
vertical-align: bottom;
margin: 0;
padding: 10px 20px 0;
list-style-type: none;
}
.chat__messages__item {
position: relative;
margin-bottom: 10px;
padding: 8px 10px;
background-color: #D8F2FD;
clear: both;
}
<!-- THIS STYLE HAS NO AFFECT UNLESS I SET A MAX-WIDTH ON .chat__messages__item -->
.chat__messages__body {
word-wrap: break-word;
}
</style>
<div class='chat__messages__inner'>
<ul class='chat__messages__list'>
<li class='chat__messages__item'>
<div class='chat__messages__body'>
hereisaverylonglineoftextthatiwouldliketobreakandwrap
</div>
</li>
<li class='chat__messages__item'>
<div class='chat__messages__body'>
here is a long sentence that will wrap and behave correctly
</div>
</li>
</ul>
</div>
The desired behavior is that the <div> and <li> containing the text should be no wider/taller than the text itself, but those elements also should never be wider than their parents - so for a few words, they might be 150px wide, but if the container shrinks to be less than 150px, these elements will also start to shrink and the text inside will start to wrap.
Playing with this code, I was able to get close to the desired result by setting the style for .chat__messages__body to include word-wrap: break-word and then setting the parent .chat__messages__item to include max-width: 300px (omitted above). Although the long word would break and wrap, it only produced the correct result on my full-screen window - if the window is resized or starts off at less-than-full, the word still wraps but the div is 300px wide (I tried setting this as a percentage, but that does not work, the word actually unwraps).
The long sentence that I included above does exactly what I would like - its parent <div> and <li> are both the size of the text, and if the window shrinks so that the width of these elements would be greater than their parents (which all scale to the 24vw ancestor), they begin to shrink as well and the text wraps on spaces.
In plain English, I would like the long word's container to never be wider than the 100% width ancestors, and it needs to resize dynamically with the window, breaking and wrapping along the way.
I'm not really a CSS/design expert, this is code I inherited from someone else, and I've been fighting with this for way too long... any guidance would be much appreciated.
Here is a question you could check out. One of the answers suggest what I would try, which is to use the <wbr> tag which creates a word break opportunity. You can read about it here.
Ok, turns out the thing to do was to set .chat__messages__inner and .chat__messages__list to display: inline-block with width: 100%, and .chat__messages__item needed to have max-width: 100%.
I ran into an interesting CSS problem today, and I have been wracking my brain trying to solve it.
This is similar to the trivial problem of "a row of three elements, with a left, a right, and center," which can be solved easily with flexbox — but it has a couple of caveats that make it (I think) an impossible layout without JavaScript.
The desired goal
Consider a row-like container element and three children, "left", "right", and "center". The children may be of varying widths, but they are all the same height.
"Center" should try to stay centered relative to its container — but the three sibling elements must not overlap, and may push outside the container if necessary.
The markup, then, might look something like this:
<div class="container">
<div class="left">I'm the left content.</div>
<div class="center">I'm the center content. I'm longer than the others.</div>
<div class="right">Right.</div>
</div>
The CSS is where the challenge is.
Examples of what should happen
For wide containers, "center" is centered relative to the container (i.e., its siblings' widths do not matter), as in the image below; notice that midpoint of the "center" element matches the midpoint of the container, and that the left and right "leftover" spaces are not equal:
For narrower containers, "center" abuts the widest sibling, but it does not overlap. The remaining space is distributed only between the narrow sibling and the "center" sibling. Notice also that the container's midpoint, indicated by the caret, is no longer the same as "center's" midpoint:
Finally, as the container continues to shrink, there's no other option but to have all three elements lined up in a row, overflowing the parent:
My attempts to solve this
Surprisingly, I haven't found a good way to implement this in pure CSS.
You'd think flexbox would be the winner, but you can't really get flexbox to do it right: The space-between property distributes the space uniformly between the elements, so the center element doesn't actually end up centered. The flex-grow/shrink/basis properties aren't especially useful for this either, since they're responsible for controlling the size of the child elements, not for controlling the size of the space between them.
Using position:absolute can solve it as long as the container is wide enough, but when the container shrinks, you end up with overlap.
(And float layouts can't get within a mile of getting this right.)
I could combine the best two solutions above, and switch between them with a #media query — if all of the widths were known in advance. But they aren't, and the sizes may vary widely.
In short, there's no pure-HTML-and-CSS solution to this problem that I know of.
Conclusion, and a JSFiddle to experiment with
I created a JSFiddle that shows both the desired goal and a few non-solutions. Feel free to fork it and experiment. You can simulate the container resizing by grabbing the bar to the left of the content and dragging it. You are allowed to rearrange/restructure the HTML and CSS, if rewriting it gets you closer to a working answer.
https://jsfiddle.net/seanofw/35qmdnd6
So does anyone have a solution to this that doesn't involve using JavaScript to intelligently distribute the space between the elements?
With flexbox you should be able to solve that, by giving the left/right elements flex: 1 and the right text-align: right.
The main trick is flex: 1, which will make them share available space equally.
For more versions, see this brilliant question/answer, flexbox-justify-items-and-justify-self-properties
Fiddle snippet
Stack snippet
body {
font: 14px Arial;
}
.container {
display: flex;
border: 1px solid #00F;
}
.container > div > span {
display: inline-block;
background: #36F;
white-space: nowrap;
padding: 2px 4px;
color: #FFF;
}
.container > .center > span {
background: #696;
}
.container .left,
.container .right {
flex: 1;
}
.container .right {
text-align: right;
}
.center-mark {
text-align: center;
font-size: 80%;
}
.note {
text-align: center;
color: #666;
font-style: italic;
font-size: 90%;
}
<div class="container">
<div class="left">
<span>
I'm the left content.
</span>
</div>
<div class="center">
<span>I'm the center content. I'm longer than the others.</span>
</div>
<div class="right">
<span>
Right.
</span>
</div>
</div>
<div class="center-mark">^</div>
<div class="note">(centered marker/text)</div>
I have a case which I'm trying to solve with pure CSS, but I somehow feel like it is not possible (or at least not without using tables).
Imagine following layout
<div class="parent">
<span class="name">
Some name
</span>
<span class="number">
123
</span>
</div>
I want the parent to be of a fixed width and then have name followed inline by number. However, if the name is too long, I would like it to truncate (using ellipsis), but the number should remain and be moved to the right until it reaches the border of parent.
Here are few examples to illustrate.
Short text 1 |
Longer text 12 |
Very, very lon..123|
Notice that also the number text can have variable length (thus the width can't be fixed).
Any ideas?
CSS Flexbox layout does a good job of making this sort of thing a breeze. You can read about the details on using it on the MDN article "Using CSS Flexible Boxes", but here is a simple example of how it can solve your layout:
.parent {
display: flex;
width: 8em;
}
.name {
/* Make width shrinkable beyond width of content */
flex: 0 1 auto;
/* Make sure text doesn't wrap or push beyond element boundaries */
overflow: hidden;
white-space: nowrap;
/* Show an ellipsis when text cuts off */
text-overflow: ellipsis;
}
.number {
/* Make width inflexible */
flex: 0 0 auto;
}
You can see it in action in this example JSBin.
This question already has answers here:
Why doesn't the height of a container element increase if it contains floated elements?
(7 answers)
Closed 8 years ago.
I make simple http://jsfiddle.net/6KzXw/ with CSS:
.container {
width: 50%;
margin: 0 auto;
padding: 2px;
background: red;
}
.left {
float: left;
background: yellow;
}
.right {
float: right;
background: yellow;
}
and HTML:
<div class="container">
<div class="left">To the left.</div>
<div class="right">To the right.</div>
</div>
I wondering why area of container isn't red....
After search I found solution with overflow: hidden but official docs about fix: http://www.w3.org/TR/CSS21/visufx.html make me cry when I try to understand how it work...
Can any explain why overflow: hidden is fix for surrounding problem with standard in mind?
overflow: hidden causes the container to establish a block formatting context for its contents. Without it, the floats participate in some other formatting context, having been taken out of normal flow, and therefore the floats are not taken into account when calculating the height of the container.
Once you cause the container to establish a formatting context, it will consider the floats, even though the floats are still taken out of the normal flow that is established within its own formatting context. That is stated in another section of the spec. The reason this isn't stated in the section that you link to is because it's a side effect that was never really intended, but made so due to implementation limits. See this answer (and the one that it links to) for an explanation.
you need to provide a height to the div as if you float the contents, the contents are removed from the flow of the page. essentially the div sees no children inside it as the children are floating.
i added a height to the div height: 20px
FIDDLE
When you apply the 'hidden' property to an element, any floats within it will take up space. So if you have a container that only contains floated elements, that container will act like it's empty. By setting 'overflow' to 'hidden' we force that container to account for those floats.
Another solution to this is to add a "clearfix" element below the floats. It might look something like this:
<div class="container">
<div class="left">To the left.</div>
<div class="right">To the right.</div>
<div class="clearfix"></div>
</div>
And the CSS will be something like this:
.clearfix {
clear: both;
}
Personally, I prefer setting overflow to hidden (if possible) but there are many clearfix solutions out there.
http://nicolasgallagher.com/micro-clearfix-hack/
http://css-tricks.com/snippets/css/clear-fix/
http://learnlayout.com/clearfix.html
Edit:
As far as setting a set height. You can do that if you want a set height, but if you want the container to grow or shrink based on the height on the floats, you need to set overflow hidden or use a clearfix.
Because the container has a height of 0
A straight forward question.. is it possible to set the width in percentage for a span tag in CSS? for example:
<span style="width: 50%">...</span>
etc..
In my project I'm currently using divs but ofcourse after each div tag a line break gets inserted (which I don't want). So the most obvious solution to that is then to use span tags instead of div. But then I'm not able to define the width for the span tags.. Atleast not in a percentage kind of way.
Thanks in advance for any help!
Define the element as an inline block and you can control the width and height like a block element while keeping it inline with surrounding content.
#element {
display: inline-block;
width: 50%;
}
inline elements cannot have dimensions. do them to do so, and still remain inline, add:
display: inline-block
Add display: flex; on parent div style.
<div style="display: flex;">
<span style="width:50%">...</span>
<span style="width:50%">...</span>
</div>