CODEWITHSUNDEEP
htmlcssoverflow
Hughes
Hughes

Reputation: 1055

Text overflow ellipsis on dynamic width element

I'm having some issues trying to get text-overflow: ellipsis to work on an element with dynamic width. I've looked into other solutions but all of them seem to use some form of static width, whereas I'm hoping to achieve an entirely dynamic solution. Javascript IS an option but would prefer to keep it to CSS if possible. I also have the constraint of any solution being IE8 compatible. Below is what I have so far.

The HTML:

<div class="container">
    <div class="col-1 cell">
        <h1>Title</h1>
    </div>
    <div class="col-2 cell">
        <nav>
            <ul>
                <li><a href="#">Main #1</a></li>
                <li><a href="#">Main #2</a></li>
                <li><a href="#">Main #3</a></li>
                <li><a href="#">Main #4</a></li>
                <li><a href="#">Main #5</a></li>
            </ul>
        </nav>
    </div>
    <div class="col-3 cell">
        <div class="foo">
            <img src="http://placehold.it/50x50" alt="">
        </div>
        <div class="bar">
            Some overly long title that should be ellipsis
        </div>
        <div class="baz">
            v
        </div>
    </div>
</div>

The SCSS:

.container {
    border: 1px solid #ccc;
    display: table;
    padding: 30px 15px;
    table-layout: fixed;
    width: 100%;
}

.cell {
    display: table-cell;
    vertical-align: middle;
}

.col-1 {
    width: 25%;
    
    h1 {
        margin: 0;
        padding: 0;
    }
}

.col-2 {
    width: 50%;
    
    ul {
        margin: 0;
        padding: 0;
    }
    
    li {
        float: left;
        list-style: none;
        margin-right: 10px;
    }
}

.col-3 {
    width: 25%;
    
    .foo {
        float: left;
        
        img {
            display: block;
            margin: 0;
            padding: 0;
        }
    }
    
    .bar {
        float: left;
        height: 50px;
        line-height: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .baz {
        background: #ccc;
        float: left;
        height: 50px;
        line-height: 50px;
        padding: 0 5px;
    }
}

Ideally, I would like the element with the class of .bar to take up the remaining width of .col-3. Any nudge in the right direction would be greatly appreciated. Here a link to a JSFiddle as well.

Upvotes: 30

Views: 57883

Answers (3)

Josh Burgess
Josh Burgess

Reputation: 9567

Just add max-width: 100% to the element in order to achieve what you're after. The reason that you need some kind of width set is that the element will continue to expand until you tell it that it can't.

Here's a JSFiddle Example.

.bar {
    float: left;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    
    /* new css */
    max-width: 100%;
}

Edit – Flexbox edition

So, here's a flexbox display. You're going to need to shim for IE8 using a library like this: https://github.com/sfioritto/real-world-flexbox/tree/master/demos/flexie

Here's the fix for browsers that don't suck:

CSS Update

.container {
    border: 1px solid #ccc;
    display: flex;
    flex-direction: row;
    padding: 30px 15px;
    width: 100%;
}

.cell {
    flex: 1 1 33%;
    vertical-align: middle;
}

.col-1 {
    width: 25%;
    }
.col-1 h1 {
  margin: 0;
  padding: 0;
}

.col-2 {
    width: 50%;
    }
.col-2 ul {
  margin: 0;
  padding: 0;
}

.col-2 li {
  float: left;
  list-style: none;
  margin-right: 10px;
}

.col-3 {
    width: 25%;
    display: flex;
    flex-direction: row;
}
.col-3 .foo {
  flex: 0 1 auto;
}
.col-3 .foo img {
  display: block;
  margin: 0;
  padding: 0;
}
    
.col-3 .bar {
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 2 auto;
}
    
.col-3 .baz {
  background: #ccc;
  height: 50px;
  line-height: 50px;
  padding: 0 5px;
  flex: 1 1 auto;
}

JSFiddle Example

Upvotes: 53

Nikhil Thombare
Nikhil Thombare

Reputation: 1198

If you have table width 100% and want to add ellipses to the dynamic length of string inside <th> or <td> then below code helpful to you.

table {
  width: 100%;
}
table, tr , td, th {
  border: 1px solid;
}
tbody tr td:nth-child(1) {
  width: 80%;
  max-width: 1px;
  text-overflow: ellipsis;
  width: 60cm;
  overflow: hidden;
  white-space: nowrap;
}
      
tbody tr td:nth-child(2) {
  width: 20%;
}
<html>
  
<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="broadcast-notification-title-section">January testing demo testing testing can be done by me to be done</td>
      <td>$100</td>
    </tr>
    <tr>
      <td class="broadcast-notification-title-section">February testing demo</td>
      <td>$80</td>
    </tr>
  </tbody>
  
</table>

 
</html>

Upvotes: 0

Louis Tran
Louis Tran

Reputation: 91

Please try out let the parent have "min-width: 0;". According to: Carlor on codepen.io (https://codepen.io/cjulian/pen/wrOyJz)

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

.fluid {
  flex: 1 1 100%;
  min-width: 0;
}

.fluid-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.static-content {
  width: 200px;
}

/* not required styles */
.wrapper {
  border: 1px solid black;
}

.fluid-content {
  background-color: pink;
}

.static-content {
  background-color: yellow;
}
<h1>text-overflow on a fluid width container</h1>
<div class="wrapper">
  <div class="fluid">
    <div class="fluid-content">
      This div does not have a fixed width. Its content will not wrap.
      If the content does not fit it will be truncated with ellipses.
    </div>
  </div>
  <div class="static">
    <div class="static-content">
      fixed width
    </div>
  </div>
</div>

Upvotes: 8

Related Questions