CODEWITHSUNDEEP
htmlcssflexbox
jsf
jsf

Reputation: 943

Make div not expand parent

I searched for this problem for quite a while now, but only found solutions to the opposite problem.

So here is my problem:

I have a side panel that should be only as wide as its content. This panel has a header with a potentially long title. That header should not expand the panel, but instead be ellipsed.

The HTML looks similar to this

<div class="outer">
  <div class="inner">
    <div class="header">
      superlongtextthatshouldbeellipsed
    </div>
    <div class="line">
      short text
    </div>
    <div class="line">
      even shorter text
    </div>
  </div>
</div>

This is the CSS to demonstrate the problem

.outer {
  background-color: #FFAAAA;
  display: flex;
  flex-direction: row;
}
.inner {
  background-color: #AAAAFF;
  display: flex;
  flex-direction: column;
  margin: 5px;
}
.header {
  margin: 5px;
  background-color: #AAFFAA;
  white-space: nowrap;
  overflow: none;
  text-overflow: ellipsis;
}
.line {
  margin: 5px;
  background-color: #FFAAFF;
}

https://jsfiddle.net/1yn725hy/9/

In the fiddle the blue box should be as wide as the second purple box (+margin). The text in the green box should be ellipsed.

How do I do this?

EDIT: Just to clarify: The blue box should fit the content of the purple box which has a varying size. A fixed width does not solve the problem.

Upvotes: 3

Views: 2941

Answers (3)

jsf
jsf

Reputation: 943

Ok, finally solved it myself. The trick is to use the almighty flexbox and wrap the header in it:

.outer {
  background-color: #FFAAAA;
  display: flex;
  flex-direction: row;
}

.inner {
  background-color: #AAAAFF;
  display: flex;
  flex-direction: column;
  margin: 5px;
}

.header {
  margin: 5px;
  background-color: #AAFFAA;
  display: flex;
}

.header2 {
  width: 0px;
  flex-grow: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.line {
  margin: 5px;
  background-color: #FFAAFF;
}
<div class="outer">
  <div class="inner">
    <div class="header">
      <div class="header2">
        superlongtextthatshouldbeellipsed
      </div>
    </div>
    <div class="line">
      short text
    </div>
    <div class="line">
      even shorter text
    </div>
  </div>
</div>

Upvotes: 2

dudster
dudster

Reputation: 16

You should add some width to your div. Otherwise the header text wont ellipsed, because there is no "end".

https://jsfiddle.net/1yn725hy/14/

Upvotes: 0

aMJay
aMJay

Reputation: 2233

First of all your container has to have max-width or width fixed. Second of all your overflow has to be hidden instead of none:

.outer {
  background-color: #FFAAAA;
  display: flex;
  flex-direction: row;
}

.inner {
  background-color: #AAAAFF;
  display: flex;
  flex-direction: column;
  margin: 5px;
}

.header {
  margin: 5px;
  background-color: #AAFFAA;
  white-space: nowrap;
  max-width:200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.line {
  margin: 5px;
  background-color: #FFAAFF;
}
<div class="outer">
  <div class="inner">
    <div class="header">
      superlongtextthatshouldbeellipsed
    </div>
    <div class="line">
      short text
    </div>
    <div class="line">
      even shorter text
    </div>
  </div>
</div>

Upvotes: 2

Related Questions