css text overflow and grid

user_6891996 0
Viewed 114

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:

  1. if there's room, 1st span will fill the available space:
<div>
   <span>longgggggggggg</span>
   <span>text</span>
</div>

result:

longgggggggggg text
  1. if they overflow, they are seperated to 2fr and 1 fr:
<div>
   <span>longgggggggggggggggggg</span>
   <span>textttttttttt</span>
</div>

result:

longgggggggg... textt...
  1. if they are short, they float left (also, second part can fill rest, it is limited to 1fr only if first part fills the space):
<div>
   <span>short</span>
   <span>textttttt</span>
</div>

result:

short textttttt
css html javascript
3 Answers

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>

user_153726680

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%;
}
user_51188750

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 :)

user_68919960
Related