Estoy tratando de crear en div 2 tramos que una vez que llenan el espacio disponible, toman 2fr y 1fr espacio ... tiene algunas reglas:
<div> <span>longgggggggggg</span> <span>text</span> </div>resultado:
longgggggggggg text <div> <span>longgggggggggggggggggg</span> <span>textttttttttt</span> </div>resultado:
longgggggggg... textt... <div> <span>short</span> <span>textttttt</span> </div>resultado:
short texttttttPuede lograr el efecto que está tratando de hacer usando max-width y min-width . No creo que puedas usar fr en este caso, pero puedes usar el porcentaje para lograr un efecto similar. Puede intentar copiar el código a continuación y ajustar la longitud de los textos para ver si funciona como usted desea.
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>Puedes hacerlo usando 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%; }¡LO RESUELTO CON 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>Gracias chicos :)