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?

6
  • This question may help Sep 24, 2014 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? Sep 24, 2014 at 14:50
  • @MarcusRommel with the var widthOriginal = jQuery(this).width(); I get the available space. How could I create this division? Sep 24, 2014 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). Sep 24, 2014 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. Sep 24, 2014 at 16:19

5 Answers 5

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

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

1
  • 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. Sep 24, 2014 at 15:00
7
text-overflow: ellipsis

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

4
  • Really nice approach :) Didn't knew/noticed this property on the overflow css style. Thanks =D Feb 23, 2015 at 11:13
  • 2
    Just to point out that to make it work properly it should be white-space: nowrap; overflow: hidden; text-overflow: ellipsis; Mar 13, 2015 at 13:40
  • 1
    I had no idea this existed!
    – Stevo
    Mar 7, 2016 at 8:43
  • 2
    IMPORTANT: you must include white-space: nowrap and overflow: hidden for this to work.
    – Luke
    Mar 7, 2016 at 22:26
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/

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>');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.