CODEWITHSUNDEEP
javascripthtmlcss
eifr
eifr

Reputation: 21

css text overflow and grid

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

Upvotes: 2

Views: 172

Answers (3)

Yong
Yong

Reputation: 1685

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>

Upvotes: 2

eifr
eifr

Reputation: 21

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

Upvotes: 0

soroush madani
soroush madani

Reputation: 161

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

Upvotes: 1

Related Questions