I want to create a breadcrumb for a website.
The elements should expand to fill all of the available space. If they couldn't fit on it, I'd like to have their inner text clipped with text-overflow: ellipsis, except the last one.
In other words: have the last element with the full width, and distribute the other ones on the remaining space (with width depending on their content, or if not possible at least they should't look bad...).
I tried with this code.
<div>
<ul>
<li>paka</li>
<li>ultrapaka</li>
<li>ultrapaka</li>
<li>ultrapaka ultrapaka</li>
<li>daslidjsajdsa</li>
</ul>
</div>
Here the CSS:
div {
display: table;
margin: 5px;
border:1px solid #777;
padding: 3px;
table-layout:fixed;
}
ul {
display: table-row;
}
li {
display: table-cell;
padding: 5px;
border: 1px solid #000;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
If I put table-layout: fixed the table really constrains its space, but I lose the automatic cell width.
If I don't put it, the table just overflows outside of its limits.
You can find a JsFiddle here. (I have set the table width to 400px to show the desired effect, even though on the final solution it should expand at 100%).
The best way to do that is using flexbox properties, but it's hard to make it work for all browsers.
You could maybe give a fixed width or percentage for all cells, and use the :last-child selector to apply an auto width on the last cell.
You could also try box-sizing, but I'm not sure about the result.
Related
This question already has answers here:
Flexbox children shrink up to a certain point (but don't expand if they don't need to)
(3 answers)
Closed 2 years ago.
I have a box that displays a number of text elements, one after the other along a row. I do not want the text within each element to wrap. Instead if there is insufficient room then it should truncate the text and show an ellipse.
This is easy to obtain using display: flex, and allowing each element to shrink to zero.
But the smaller elements are shrunk so much that the text almost completely disappears. In that case I would rather shrink the smaller elements a little less, and shrink the bigger elements more. This can also be obtained by giving each element a bigger min-width (say 100px) so that it cannot shrink beyond a certain point.
My problem occurs when one of the text element's intrinsic width is already smaller than 100px. Since I just specified that the element had a longer min width, the browser leaves extra space after the element. I don't want that extra space.
I would prefer not to use java-script. I'm seeking a solution using CSS. It's so close that I feel that it should be possible, but none of my attempts have come out correctly.
If I knew in advance which text elements were tiny, then I can specify that the tiny elements should not flex at all, and get the desired outcome. But without using javascript I do not know which elements are tiny.
If I could set the min-width of an element to the minimum of its intrinsic width and 100px then I would get the desired outcome. Although CSS does have a min() function which may be used for min-width, unfortunately it appears that I am not allowed to use max-content as an argument to that function.
The description of min-width on MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) states that fit-content(100px) is a syntactically valid way of specifying the min-width. I hoped to craft an element whose minimal content size is zero, and max size is the text element's intrinsic length. Then fit-content(100px) would either be 100px, or if that's larger than the intrinsic length, the intrinsic length. But whenever I use fit-content() with an argument the browser says that the expression is invalid.
Finally I tried to use a grid display. But then fit-content() either uses the intrinsic width or 100px, but does not expand further. I tried experimenting with minmax with no luck (it seems I cannot put fit-content() as an argument to minmax()). Besides I do not know the number of text elements, but a grid display wants me to specify that number so I don't think a grid can be made to work.
So is there any way to obtain the desired outcome using just CSS. Since this text is for an Electron program, I only care about Chrome as a browser. I have an example below showing each of my attempts.
main {
display: flex;
flex-direction: column;
width: 600px;
border-style: solid;
border-color: black;
border-width: 1px;
}
span {
background-color: skyblue;
padding: 10px;
margin: 0 10px 10px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 0 1 auto;
}
section {
width: 100%;
display: flex;
}
.set-min-width span {
min-width: 100px;
}
.set-min-width .no-shrink {
flex: none;
min-width: initial;
}
.use-max-expression span {
min-width: min(100px, max-content);
}
.use-fit-content div {
flex: 0 1 auto;
min-width: fit-content(100px);
display: flex;
}
.use-fit-content div span {
min-width: 0;
}
.use-grid {
display: grid;
grid-template-columns: fit-content(100px) fit-content(100px) fit-content(100px);
}
.use-grid span {
min-width: 0;
}
<main>
<h4>The hidden overflow allows each text item to shrink to nothing<br> Both small and medium elements are heavily truncated<br></h4>
<section>
<span>Medium length</span>
<span>Tiny</span>
<span>Longer text that has to be truncated to fit within the section. It is far far far far too big to fit.</span>
</section>
<h4>By setting a min-width to 100px I can control truncation of medium element. But the tiny element now has extra space after it that I do not want.</h4>
<section class="set-min-width">
<span>Medium length</span>
<span>Tiny</span>
<span>Longer text that has to be truncated to fit within the section. It is far far far far too big to fit.</span>
</section>
<h4>1: This is what I want.<br> But to obtain it I had to specify a different style for the tiny element so that it would not flex. But I don't know in advance which elements are tiny.</h4>
<section class="set-min-width">
<span>Medium length</span>
<span class="no-shrink">Tiny</span>
<span>Longer text that has to be truncated to fit within the section. It is far far far far too big to fit.</span>
</section>
<h4>2: I want the min-width to be the element's max-content if this is smaller than the truncation limit<br> `min(100px, max-content)` would return the correct result, but it is not valid CSS and so is ignored</h4>
<section class="use-max-expression">
<span>Medium length</span>
<span>Tiny</span>
<span>Longer text that has to be truncated to fit within the section. It is far far far far too big to fit.</span>
</section>
<h4>3: I tried to use fit-content(arg)<br> The inner element has min-width 0, so its min-content size should be 0<br> Its max-content size is the intrinsic width of the text<br> So the fit-content(100px) size should be 100px if that's smaller than intrinsic
width, or the intrinsic width otherwise.<br> Despite MDN stating that fit-content with argument is valid CSS for min-width, the browser rejects `fit-content(100px)`</h4>
<section class="use-fit-content">
<div><span>Medium length</span></div>
<div><span>Tiny</span></div>
<div><span>Longer text that has to be truncated to fit within the section. It is far far far far too big to fit.</span></div>
</section>
<h4>4: Using fit-content(100px) in a grid does not work either. The elements are indeed not expanded if natural width is smaller than 100px. But the elements do not flex to take rest of space.<br> Besides a grid won't work because the number of columns is
not known in advance.
</h4>
<section class="use-grid">
<span>Medium length</span>
<span>Tiny</span>
<span>Longer text that has to be truncated to fit within the section. It is far far far far too big to fit.</span>
</section>
</main>
I was giving this a little play around and this was the best I could come up width. The problem that I can see is that flex-box is terrible for not obeying boxes without setting its inner elements with a max-width of some kind. There is a few other answers I found on Stackoverflow but none of them seem to really fix what you are asking for. In my answer I used max-width on the spans, along with text-overflow: ellipsis and overflow: hidden to create something close to what you had requested.
code below and codepen - here https://codepen.io/rl4444/pen/oNLQVRr?editors=1100
HTML
<main>
<h4>my solution</h4>
<section class="box-items">
<span>Medium length</span>
<span>Tiny</span>
<span>Longer text that has to be truncated to fit within the section. It is far far far far too big to fit.</span>
</section>
</main>
CSS
main {
max-width: 600px;
width: 100%;
border-style: solid;
border-color: black;
border-width: 1px;
position: relative;
box-sizing: border-box;
}
span {
background-color: skyblue;
padding: 10px;
margin: 0 10px 10px 0;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 300px;
}
section {
display: flex;
box-sizing: border-box;
max-width: 100%;
}
.box-items span {
border: 1px solid red;
overflow: hidden;
}
I have a container with a fixed width and variable height. I'm filling the container with an unknown amount of elements.
I'd like the elements to arrange themselves in columns, from top to bottom and then left to right.
I could use column, but I don't know the maximum width of the child elements, so I can't set a column-width or column-count.
I think display: flex with flex-flow: column wrap is the way to go, but if I maintain height: auto on the container, it will generate as a single column without wrapping elements to use all the available width.
Can I convince flexbox to use all the available width and thus minimize the container's height?
Would you suggest a different solution?
Fiddle: http://jsfiddle.net/52our0eh/
Source:
HTML:
<div>
<span>These</span>
<span>should</span>
<span>arrange</span>
<span>themselves</span>
<span>into</span>
<span>columns,</span>
<span>using</span>
<span>all</span>
<span>available</span>
<span>width</span>
<span>and</span>
<span>minimizing</span>
<span>the</span>
<span>container's</span>
<span>height.</span>
</div>
CSS:
div {
outline: 1px solid red;
width: 100%;
display: flex;
flex-flow: column wrap;
align-items: flex-start;
/*height: 8em;*/
}
span {
outline: 1px solid blue;
}
What you look for is more like the column rules: DEMO
div {/* do not set column numbers rule */
width: 100%;
-moz-column-width:4em;
column-width:4em;
-moz-column-gap:0;
column-gap:0;
-moz-column-rule:solid 1px;
column-rule:solid 1px;
text-align:center;
}
I've compromised and set height: 10em (which seems acceptable) along with overflow-y: auto (to add a horizontal scrollbar in case of overflow) on the container element.
I would still like to know if there is a way to use all available width and minimize the height, though.
In the end, your options for overflowing are hide, scroll, or wrap. How about this version instead? It takes any overflowing items and puts them on a second row. Items on the second row still fill the available space, but are larger due to the smaller number of items sharing the space.
http://jsfiddle.net/52our0eh/14/
div {
outline: 1px solid red;
display: flex;
flex-flow: row wrap;
}
span {
outline: 1px solid blue;
flex:1;
}
I have a set of CSS which allows simple family trees to be drawn using unordered lists.
This works well so long as the ul.tree is narrower than the width of the screen at which point it does an untidy wrap. To avoid this I have used the following:
#treewrapper {
margin: 10px; padding: 20px; width: auto; white-space: nowrap; overflow-x: scroll; overflow-x: scroll;
}
#tree {width: 5000px;}
How ever this means you get a huge #tree area even when the tree is actually narrower than the the current width of #treewrapper.
My first thought was to find the width of the ul element and change the width of ul.tree to match using javascript once the page is rendered, but when I look at the width of ul it appears to be the width of #tree minus the padding.
Setting #tree width to auto simply results in a wrapped ul.tree when the screen is narrow.
Is there a simple way in CSS (or javascript) to get #tree to be wide enough?
Live example with #tree set to Auto can be seen at http://www.rjt.org.uk/m/example/index.html
The way to get the width is by using javascipt and .offsetWidth. Here is an example:
document.getElementById('tree').offsetWidth;
Though you can just use css to include the padding by using:
display: block;
float: left;
Because when you use block elements it picks up the padding as well
Change the width of #treewrapper, .tree and .tree ul to width:100%;. Should fix your problem.
I'd like to create a fluid horizontal navigation list of links, where the nav links are evenly spaced and take up the full width of the enclosing container . Nav links are all different widths. The first link should be left-aligned and the last link should be right aligned.
I've had limited success using techniques such as:
ul {display: table;width: 100%;}
li {display: table-cell;}
a {display: block;}
and also using
ul {text-align: justify}
li {inline-block }
but no code I've written seems to deal at all well with elements that are different widths. The spacing does not seem to stay equal as the nav is resized.
I need the nav to be fluid, first and last elements to be flush against the edge of the containing ul and for the elements to be equidistant from each other
I thought about this for a while and came up with two reasonable approaches, both of which are pretty good but not exactly pixel perfect. One is CSS based only and the second is aided by jQuery (JavaScript).
CSS Approach - pretty good approximation
Consider the following HTML:
<ul class="nav ex1">
<li class="first">Home</li>
<li>Collections</li>
<li class="tight">About Us</li>
<li>Slocklists</li>
<li class="tight">Trade Enquiries</li>
<li>Press</li>
<li class="last">Contact Us</li>
</ul>
I added some classes as hooks for the styling.
The CSS is as follows:
.nav.ex1 {
outline: 1px dashed blue;
width: 100%;
margin: 0;
padding: 0;
display: table;
}
.nav.ex1 li {
display: table-cell;
outline: 1px dotted gray;
width: 20%;
white-space: pre;
text-align: center;
}
.nav.ex1 li.first {
width: 1%;
}
.nav.ex1 li.last {
width: 1%;
}
.nav.ex1 li.tight {
width: 1%;
}
In Example 1, the ul.nav parent container uses display: table and width: 100%. The child li elements are table-cell's. I added white-space: pre to prevent some of the links from wrapping into two lines, and text-align: center to keep the text centered.
The trick is to force some of the table-cell's to shrink-to-fit the text, and you can do this by setting width: 1% which is non-zero but too small to hold the text (unless your screen is 10,000 pixels wide). I shrink-to-fit the first and last cells which forces them to align to the left and right edges of the parent container. I then force every other table-cell to shrink-to-fit by added the .tight class.
The remaining table's cells will have a width of 20% which will keep them evenly spaced between their two nearest neighbors. HOWEVER, there will be some slight variation in spacing among the links in the row, which is why I call it an approximation.
jQuery Aided Solution
In Example 2, the markup is essentially the same and the CSS is:
.nav.ex2 {
outline: 1px dashed blue;;
margin: 0;
padding: 0;
display: block;
overflow: auto;
width: 100%;
}
.nav.ex2 li {
float: left;
display: block;
outline: 1px dotted gray;
width: auto;
}
In this case, the li elements are floated left and I use width: auto.
The trick is to calculate the magic left-margin value and apply it to all the li elements except for the first one.
The jQuery action is:
$(window).resize(function () {
navResizer();
});
// On load, initially, make sure to set the size.
navResizer();
function navResizer() {
var $li_w = 0;
var $ul_w = $(".nav.ex2").innerWidth();
$( ".nav.ex2 li" ).each(function( index ) {
$li_w += $(this).innerWidth();
});
var li_margin = Math.floor(($ul_w-$li_w)/6);
$(".nav.ex2 li").not(".first").css("margin-left",li_margin);
$("p.note").text( "Widths: ul.nav: " + $ul_w + " all li: " + $li_w + " Left margin: " + li_margin);
}
Basically, the action calculates the width of ul.nav ($ul_w), and the total widths of all the li child elements ($li_w).
The left-margin is calculated by ($ul_w - $li_w)/6 where 6 is the number of gaps between the 7 links.
The key line of code is: $(".nav.ex2 li").not(".first").css("margin-left",li_margin);
I use .not(".first") to omit the first li element and then .css to set the left margin.
The one slight defect is at the far right where the link is not quite right justified, but you can fix that by floating the last li to the right.
For the most part, if your link texts were similar in length, you would be hard pressed to distinguish the two. Both approaches are not quite pixel perfect, but pretty good.
Fiddle: http://jsfiddle.net/audetwebdesign/xhSfs/
Footnote
I tried some other approaches using text-align: justify and inline-block, but the CSS engine does not treat inline-blocks like regular words, so will not justify a line of inline-blocks.
Setting left-margin to a % value will not quite work at some window widths and the right-most link will not be on the edge as desired.
The jQuery approach has been tried before, see:
Evenly-spaced navigation links that take up entire width of ul in CSS3
You can use text-align: justify; and ignore the last left-justified row. #last is invisible and takes up the last row because of padding-left: 100%;: http://jsfiddle.net/mwRbn/
if you want to align the text of the menu vertically, use height in combination with line-height:
ul#nav {
text-align: justify;
width: 100%;
background: yellow;
height: 2em;
line-height: 2em;
}
http://jsfiddle.net/mwRbn/1/. Do you need a IE<8 hack?
I have a container whose id is #parent, I dynamically add several images of class .child, fixed width and height can be assumed for .child elements.
I want all .child to float next to each other to build a horizontal list. How do I get #parent resizing automatically to the total width of all .child ?
Thanks a lot!
PS: I need a pure CSS solution..
Fiddle: http://jsfiddle.net/u8GPN/1/
Solution can be found here: http://jsfiddle.net/u8GPN/28/
You can make your parent inline-block and add white-space: nowrap; to it:
#parent {
display: inline-block;
overflow: hidden;
border: 1px dashed blue;
white-space: nowrap;
}
http://jsfiddle.net/u8GPN/22/
To test dynamically adding new blocks http://jsfiddle.net/u8GPN/23/
You can also give position: absolute to the #parent div to solve the problem for cross-browser support. (or go with white-space: nowrap as shown in #dfsq's post)
#parent {
display : block; /* (or) inline-block */
overflow : hidden;
border: 1px dashed blue;
position:absolute; /* Doesn't extend the width more than the page's width */
}
Working Fiddle
As you stated that the .child elements have fixed width and height, You need to give #view height explicitly equal to the .child elements height, to occupy the space in layout.