Multiline ellipsis in resizable container

Question

I am working on a responsive card, that must always be square.

The card title (in red in the screenshots below) should have an ellipsis when the container's size is reduced, in order to keep the card square.

How can I achieve this ? I'm looking for a pure CSS solution, if possible.

EDIT :

HTML :

<div class="square">
  <div class="first-half"></div>
  <div class="second-half">
    <div class="buttons"></div>
    <div class="ellipsis-container">
      <p>Restaurant - Au Joyeux Codeur</p>
    </div>
  </div>
</div>

CSS :

.square
{
  background-color : #000;
    height: 48vw;
    width: 48vw;
}

@media only screen and (min-width: 601px)
{
    .square
    {
    height: 32vw;
    width: 32vw;
    }
}

@media only screen and (min-width: 993px)
{
    .square
    {
    height: 15vw;
    width: 15vw;
    }
}

.first-half
{
  height: 50%;
  background-color: #3f51b5;
}

.buttons
{
  height: 30px;
  background-color: #ffc107;
}

.ellipsis-container
{
  background-color: #f44336;
}
.ellipsis-container > p
{
  margin: 0;
  font-size: 1.5rem;
}

Here is a jsfiddle with one of the squares : https://jsfiddle.net/5512hxdv/5/

Expected Result :

Check out my answer here: http://stackoverflow.com/a/31080671/462627 — Praveen Kumar Purushothaman, Dec 24 '15 at 18:18
Also check this out: [Line Clampin...](https://css-tricks.com/line-clampin/) — Praveen Kumar Purushothaman, Dec 24 '15 at 18:20
You can use jQuery plugin: [dotdotdot](https://github.com/BeSite/jQuery.dotdotdot) — Sharad Saxena, Dec 24 '15 at 19:20
@PraveenKumar I saw your solution. In my case, I can't rely on the height nor the width, because they're dynamic. I'll edit my question with a JsFiddle, so you can see what I'm speaking about. — Yoluk, Dec 24 '15 at 19:44
@pratikwebdev No, it doesn't works, the text has no ellipsis when the container is resized. But thanks anyways, I saw some nice things in your css. — Yoluk, Dec 24 '15 at 22:44

pratikpawar · Answer 1 · 2015-12-25T00:57:07.397

0

Here it is. Made few changes. check it out

.square
  {
    background-color : #000;
    height: 48vw;
    width: 48vw;
    display: inline-block;
   }

 @media only screen and (min-width: 601px)
 {
 .square
      {
     height: 32vw;
     width: 32vw;
     }
 }

 @media only screen and (min-width: 993px)
 {
     .square
 {
 height: 15vw;
 width: 15vw;
 }
 }

 .first-half
 {
   height: 50%;
   background-color: #3f51b5;
 }
 .second-half
 {
   height: 50%;

 }
 .buttons
 {
   height: 50%;
   background-color: #ffc107;
 }

 .ellipsis-container
 { height: 50%;
   background-color: #f44336;
 }
 .ellipsis-container > p
 {
   margin: 0;
   height : 100%;
   text-overflow:ellipsis;
 }

 .test 
 {
     white-space: nowrap; 
     overflow: hidden;
     text-overflow: ellipsis;
 }

edited Dec 25 '15 at 00:57

answered Dec 24 '15 at 22:59

pratikpawar

2,038
2
16
20

This works, and is almost what I need. It might not be clear in my question, but I want the text to fill all lines available. I edited my post with the result I want to achieve. – Yoluk Dec 24 '15 at 23:22
I am not sure how it can be done. May be someone will help guide this to closure :) @Yoluk You could look in to example praveen shared and tweak as per your need or few more similar links on google should help you understand. – pratikpawar Dec 25 '15 at 01:06

Multiline ellipsis in resizable container

1 Answers1