0

The problem is vertically fitting as much text as possible in a child <div> without having the child <div> grow beyond the parent container <div> and without knowing the amount of remaining space in the parent container in advance.

The container has a fixed height and two children. Here is a sample HTML snippet:

<div class="container">
  <div class="title">
    The title, this must grow as much as needed
  </div>
  <div class="text">
    Some text that goes beyond the size of the container. I want this text to be cut with ellipsis when the container "ends"
  </div> 
</div>

and the corresponding stylesheet:

.container {
  width: 15rem;
  background-color: yellow;
  height: 20rem;
}

.title {
  font-size: 200%;
  font-wieght: 600;
}

.text {
  text-overflow: ellipsis;
  border: 2px solid red;
}

The first child (the title) must adapt its size to the contained text. The other child must use up to the remaining vertical space, but it must not grow beyond the fizex height of its parent.

This jsfiddle shows what I'm trying to achieve.

I need a solution with CSS only, no Javascript possible. I can change the HTML structure if needed.

EDIT after the hints to add overflow: hidden to the container:

Since doing exaclty what I need does not seem to be possible, I can live without the ellipsis, so the overflow: hidden solution would be ok for me. However I've tried that but it does not seem to work:

https://jsfiddle.net/lucrus/8ux1h309/5/

Lucio Crusca
  • 1,277
  • 3
  • 15
  • 41
  • Should it then get a scrollbar to view the text that doesn't fit? Or is the extra text simply not visible? – random_user_name Apr 12 '17 at 13:13
  • Why not just "overflow: hidden" on the `.container` element? – random_user_name Apr 12 '17 at 13:16
  • If you try to adjust font size of your text to fill the container - see [this topic](http://stackoverflow.com/questions/22945594/css-calc-on-font-size-changing-font-size-based-on-container-size) – Arkej Apr 12 '17 at 13:22

2 Answers2

2

This is pretty simple to do with Flexbox. You just need to use flex-direction: column on parent element and flex: 1 and overflow: hidden on element you want to take rest of height. But if you want multi-line text overflow ellipsis that is hard to do with css right now.

.container {
  width: 15rem;
  background-color: yellow;
  height: 20rem;
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 200%;
  font-weight: 600;
}

.text {
  border: 2px solid red;
  overflow: hidden;
  flex: 1;
}
<div class="container">
  <div class="title">
    The title, this must grow as much as needed
  </div>
  <div class="text">
    Some text that goes beyond the size of the container. I want this text to be cut with ellipsis when the container "ends".<br/><br/>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>
Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176
0

You'll need to add overflow: hidden and white-space: nowrap to .text: https://jsfiddle.net/dgrijuela/8ux1h309/3/

But only 2 lines will be displayed (because of nowrap), text-overflow: ellipsis only works with nowrap so it's not possible to have the ellipsis at the end of the paragraph.

If you want the paragraph to be cut (without the ellipsis), apply the overflow: hidden to .container.

dgrijuela
  • 683
  • 7
  • 9