Question 418179 in CSS Question posted in
Some basic documentation can be found here.

Css – text-overflow ellipsis issue in nested element along with tooltip in flexbox column direction

I have a two column layout with left section taking 80% width and right section taking 20% width.

In the right section, I have a list of items to be displayed with texts that can be bigger than the right section width.

The first item, the parent div under which the text needs to be shown an ellipsis is a tooltip (demonstrated via bootstrap based tooltip) but while tooltip is shown the text is not shown with an ellipsis.

I have made this change only to the first item in the list just to illustrate the issue.

The other four list items are shown with an ellipsis as they are styled correctly under list-item class.

.container {
  display: flex;
  width: 100%;
}

.left {
  width: 80%;
  background-color: lightyellow;
  border: 1px solid black;
}

.right {
  flex-direction: column;
  width: 20%;
  background-color: palegreen;
  border: 1px solid black;
  .list {
    display: flex;
    flex-wrap: wrap;
    .list-item {
      margin: 1px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="left">left section content</div>
  <div class="right">
    <div class="list">
      <div class="list-item">
        <div data-bs-toggle="tooltip" title="This is a very big text that is not supposed to fit in the right pane">
          1. This is a very big text that is not supposed to fit in the right pane
        </div>
      </div>
      <div class="list-item">
        2. This is a very big text that is not supposed to fit in the right pane
      </div>
      <div class="list-item">
        3. This is a very big text that is not supposed to fit in the right pane
      </div>
      <div class="list-item">
        4. This is a very big text that is not supposed to fit in the right pane
      </div>
      <div class="list-item">
        5. This is a very big text that is not supposed to fit in the right pane
      </div>
    </div>
  </div>
</div>

I have referred this answer as it is almost similar to my issue but the solution does not work for me.

Can someone let me know what am I missing in my use case?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Before posting this question I also looked up Flexbox and Truncated Text to understand the issue I faced in my code.

    The answer posted by @Eloi also reiterated the same thing but still in my project specific case it did not work.

    Finally I figured out that for the concerned deeply nested parent div element, display: flex; needs to be mentioned for the ellipsis to take effect for the underlying child.

    Following is my changed code now. is my deeply nested parent css class. is my child css class under which the long text is displayed that needs to be ellipsized.

    <parent-div> {
  display: flex; // Added this in my project specific tree
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
    <child-div> {
     ...
    }
}

  2. 0

    The styles are only applying to the .list-item, if you want the same effect in the div inside it just add this :

    .container {
  display: flex;
  width: 100%;
}

.left {
  width: 80%;
  background-color: lightyellow;
  border: 1px solid black;
}

.right {
  flex-direction: column;
  width: 20%;
  background-color: palegreen;
  border: 1px solid black;

  .list {
    display: flex;
    flex-wrap: wrap;

    .list-item {
      margin: 1px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      
      div {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
}
    <div class="container">
  <div class="left">left section content</div>
  <div class="right">
    <div class="list">
      <div class="list-item">
        <div data-bs-toggle="tooltip" title="This is a very big text that is not supposed to fit in the right pane">
          1. This is a very big text that is not supposed to fit in the right
          pane
        </div>
      </div>
      <div class="list-item">
        2. This is a very big text that is not supposed to fit in the right pane
      </div>
      <div class="list-item">
        3. This is a very big text that is not supposed to fit in the right pane
      </div>
      <div class="list-item">
        4. This is a very big text that is not supposed to fit in the right pane
      </div>
      <div class="list-item">
        5. This is a very big text that is not supposed to fit in the right pane
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search