Why Is That Inline-block Parent Of An No-wrap Ellipsis Child Always Seems To Take Place For Complete Text?

Please check this example JsBin, here we have simple layout we have a child which have too long text and we need to make it no-wrap ellipsis to avoid breaking of layout but parent

Solution 1:

You're specifying a percentage max-width for an inline-block that is a child of a float that doesn't have an explicit width. This results in undefined behavior because there is a circular dependency between the parent (float) width and the child (inline-block) width.

The apparent browser behavior is that the float is shrink-wrapped to the size of its contents — just enough to contain the content in one line — first, so that it has a size on which the inline-block can then base its 40% max-width. The inline-block then clips its content via overflow: hidden. The size of the float is not computed again.

Solution 2:

As BoltClock said, I dont think here inline-block works for this situation, you can try table like this: Demo

.title-logo-container {
  clear: both;
  border: solid 1px #f00;
  background: green;
  display: table-cell;
}

.logo {
  margin: 1.375em 1.5625em 15px;
  padding: 0;
  position: relative;
  width: 5.625em;
  z-index: 103;
  display: table-cell;
  background: #ff0;
}

.page-title {
  max-width: 40%;
  display: table-cell;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  background: #ccc;
}

Hope this helps you !

Solution 3:

Check out below solution:

Demo

CSS:

.title-logo-container {
  border: solid 1px #f00;
  display:inline-block;
  float:left;
  width:100%;
}

.logo {
    margin: 1.375em 1.5625em 15px;
    padding: 0;
    position: relative;
    width: 100px;
    z-index: 103;
    display: inline-block;
}

.page-title {
  width: calc(100% - 160px);
    display: inline-block;
    margin: 0;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}