I'm trying to create in div 2 spans that once they fill the available space, they take 2fr and 1fr space... it has few rules:
<div>
<span>longgggggggggg</span>
<span>text</span>
</div>
result:
longgggggggggg text
<div>
<span>longgggggggggggggggggg</span>
<span>textttttttttt</span>
</div>
result:
longgggggggg... textt...
<div>
<span>short</span>
<span>textttttt</span>
</div>
result:
short textttttt
You can achieve the effect you're trying to do using max-width and min-width. I don't think you can use fr's in this case but you can use percentage to achieve similar effect. You can try copying the code below and adjust the texts' length to see if it performs the way you want it to be.
span{
font-size: 30px;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 1rem;
}
div{
display: flex;
white-space: nowrap;
}
.first{
min-width: 33%;
max-width: 66%;
}
.second{
width: 100%;
min-width: 33%;
color: red;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<span class="first">
Cumque iusto nisi inventore. Commodi, neque animi??</span>
<span class="second">2nd text Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime aliquid doloremque recusandae culpa exercitationem at quam, dolores atque sapiente nihil iste nostrum possimus, quibusdam molestias. Laudantium deleniti repudiandae aliquid voluptatibus!
Labore sunt neque laboriosam harum nulla. A itaque pariatur voluptate corrupti quos quia minima? Enim similique, itaque recusandae suscipit maxime facilis magni placeat ipsum quasi dolorem obcaecati dolores velit porro!
Fugiat maxime unde numquam nam esse ab. Similique maxime suscipit nihil qui vitae, quibusdam quae perferendis labore cupiditate laboriosam vel praesentium sed eaque adipisci dolor obcaecati eum? Nisi, ut corrupti?
Numquam esse voluptatibus ducimus quisquam sed aliquid sunt sit voluptatum, eaque adipisci quae ullam, odit obcaecati incidunt dignissimos, quasi cum prov</span>
</div>
</body>
</html>You can do it using Flex.
<div>
<span class="fist">short</span>
<span class="last">text</span>
</div>
div {
display: flex;
}
div > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
div > span.fist {
flex-shrink: 1;
}
div > span.last {
flex-shrink: 0;
max-width: 33%;
}
SOLVED IT WITH GRID! 🔥
.container {
display: grid;
width: 100%;
grid-template-columns: repeat(auto-fit, minmax(0, max-content));
}
.first {
grid-column: span 2;
}
span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="container">
<span class="fist">short</span>
<span class="last">text</span>
</div>Thank you guys :)