24

I'm trying to make a string fits in a determined area (td) without breaking line. The problem is: It needs to ...

  • Fit while resizing
  • Fit in N kinds of resolution
  • Add ... at the end when needed (and don't when not needed)
  • Accept the change of font-size, font-weight, and font-family

Based on the answers on Novon's question, I made the following code:

CSS (// Just adding some styles to break the line)

.truncated { display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

jQuery (// Find all td that contains a .truncated element. Getting the real width (by removing the content and adding it again) of the td. Applying, if needed, minWidth on the td)

jQuery('.truncated').closest('td').each(function() {
    var text = jQuery(this).text();
    var widthOriginal = jQuery(this).width();
    var widthEmpty = jQuery(this).text('').width();
    jQuery(this).text(text);
    if(widthOriginal >= widthEmpty){
        var width = (parseInt(widthEmpty) - 10) + 'px';
        jQuery(this).css('maxWidth', width);
        jQuery(this).text(text + '...');
    }
});

the result (as expected from the above code) is:

result

but it should be:

how it should be

I was thinking, maybe try to find the first line of the string and remove the rest but didn't find a way to do that (and it's a lot of "workaround" for my taste). Is there a better way to do that?

Community
  • 1
  • 1
Michel Ayres
  • 5,891
  • 10
  • 63
  • 97
  • [This question may help](http://stackoverflow.com/questions/4700226/i-want-to-truncate-a-text-or-line-with-ellipsis-using-javascript) – Sterling Archer Sep 24 '14 at 14:49
  • Have you tried getting the available space and then dividing it with a factor based on the pixel width of the average character? – Marcus Rommel Sep 24 '14 at 14:50
  • @MarcusRommel with the `var widthOriginal = jQuery(this).width();` I get the available space. How could I create this division? – Michel Ayres Sep 24 '14 at 14:59
  • @SterlingArcher the problem is that the answers on the question you linked are based on characters amount (`if (string.length > 5)`). What I need is to do it based on size (pixel). – Michel Ayres Sep 24 '14 at 15:02
  • For the division just try some divisors manually (4,5,6...) and use what fits. You then know how much characters fill one line and can cut your strings to get that long. – Marcus Rommel Sep 24 '14 at 16:19
  • possible duplicate of [With CSS, use "..." for overflowed block of multi-lines](http://stackoverflow.com/questions/6222616/with-css-use-for-overflowed-block-of-multi-lines) – Michel Ayres Sep 24 '14 at 17:28

5 Answers5

27

Single line text truncation can be easily achieved using css text-overflow property, which is supported by all major browsers, including IE since version 6.

The thing is that text-overflow alone doesn't do much. It only defines what will happen when there is text overflowing the container. So in order to see results, we first need to make the text overflow, by forcing it to a single line. It is also important to set the overflow property of the container:

.truncated {
    display: block;
    white-space: nowrap; /* forces text to single line */
    overflow: hidden;
    text-overflow: ellipsis;
}

jsFiddle example: https://jsfiddle.net/x95a4913/

text-overflow documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

Hugo Silva
  • 6,748
  • 3
  • 25
  • 42
9

You can do it with pure CSS, see this link for reference:

line clampin

Add those to your css:

.truncated {
  display: -webkit-box;
  -webkit-line-clamp: 1; // amount of line you want
  -webkit-box-orient: vertical;  
}

Or you can try clamp.js

https://github.com/josephschmitt/Clamp.js

Michel Ayres
  • 5,891
  • 10
  • 63
  • 97
Caio Kawasaki
  • 2,894
  • 6
  • 33
  • 69
  • 6
    Could you add some source to your answer? In the case of the link breaks/changes or the information on the link is lost. – Michel Ayres Sep 24 '14 at 15:00
7
text-overflow: ellipsis

seems a pure CSS solution http://www.w3schools.com/cssref/css3_pr_text-overflow.asp

Francesco
  • 24,839
  • 29
  • 105
  • 152
1

If you set table layout to fixed and the td overflow as hidden, you could prepend an ellipsis as a float-right div when the td's scroll width is greater than its client width.

Here's the CSS, which includes styles to prevent bleed-through on the table:

table {
  table-layout:fixed;
  white-space:nowrap;
  width:500px;
  border-spacing: 0px;
  border-collapse: separate;    
}

td {
  overflow:hidden;
  border:1px solid #ddd;
  padding:0px;
}

.hellip {
  padding-left:0.2em;
  float:right;
  background:white;
  position:relative;
}

jQuery:

$('td').each(function() {
  if($(this)[0].scrollWidth > $(this).width()) {
    $(this).prepend('<div class="hellip"">&hellip;</div>');
  }
});

Demo at: http://jsfiddle.net/5h798ojf/3/

Rick Hitchcock
  • 35,202
  • 5
  • 48
  • 79
0

Wrap the text twice to achieve this:

<style type="text/css">

.relative_wrap {
    height: 1em;
    position: relative;
}

.absolute_wrap {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    top: 0px;
    white-space: nowrap;
}

</style>


<table>
    <tbody>
        <tr>
            <td>
                <div class="relative_wrap">
                    <div class="absolute_wrap">
                            LONG TEXT HERE
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Since you use jQuery, it is easy:

$('.truncated').wrap('<div class="relative_wrap"><div class="absolute_wrap"></div></div>');
skobaljic
  • 9,379
  • 1
  • 25
  • 51