text-overflow: ellipsis will not work

Question

I have read all the answers to related questions about text-overflow: ellipsis and regardless of how I have applied what are to be considered the necessary properties, I cannot get it to work without removing it from within the li tags, but it needs to be within the li tags. Any help would be appreciated!

I have tried placing the necessary properties within every element shown, the only place that white-space: nowrap and overflow: hidden have an effect are when they are placed where they are shown here, yet text-overflow: ellipsis has no effect. I have also tried the li element with display: block, but to no avail.

li {
  margin-top: 19px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
img {
  display: inline-block;
  height: 45px;
  width: 45px;
  border-radius: 50%;
  box-shadow: 0px 1px 5px black;
}
.b {
  display: inline-block;
  vertical-align: super;
}
.b p {
  margin: 5px 5px 5px 15px;
}
.top-text {
  font-size: 16px;
  color: #65aef8;
}
.bottom-text {
  font-size: 16px;
  color: #fff;
}

<ul>
  <li>
    <section class="a">
      <img src="img.png" alt="Image">
      <section class="b">
        <p class="top-text">Text</p>
        <p class="bottom-text>More Text</p>
           </section>
         </section>
      </li>
     ...
    </ul>

@freestock.tk there is currently a width of 100%, but even with a fixed width, it did not work — Matt
Let the text-overflow:ellipsis/overflow:hidden/whitespace:nowrap on the <p> instead (plus set a width to it). In this case <li> is just the parent. jsfiddle — Le____
@freestock.tk setting those properties on the <p> selector with a specific width did the trick! Thanks so much! — Matt

Matt Matt · Accepted Answer · 2016-03-31T15:44:53

Changed the CSS on class 'b', element 'p' to this and text-overflow ellipsis worked:

.b p {
  margin: 5px 5px 5px 15px;
  width: 195px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

text-overflow: ellipsis will not work

1 Answers