How do I indicate long text into a smaller fixed column with CSS?

Question

How do I fit long text into a fixed width column where I have room for only one line of text? The text needs to be cut to a fixed width (lets say to 100px) and I would like to add dots "..." at the end. Something like this for example:

Given string:

Some really long string that I need to fit in there!

Desired output in fixed-width-column should be:

Some really long string...

Gordon · Accepted Answer · 2015-09-16T10:41:33.437

74

You can do this with CSS alone:

.box {
    -o-text-overflow: ellipsis;   /* Opera */
    text-overflow:    ellipsis;   /* IE, Safari (WebKit) */
    overflow:hidden;              /* don't show excess chars */
    white-space:nowrap;           /* force single line */
    width: 300px;                 /* fixed width */
}

Note: You will want to check on the latest browser support.

edited Sep 16 '15 at 10:41

answered Jan 21 '10 at 12:12

Gordon

312,688
75
539
559

Cool! I coded up a kind-of-working solution before I saw your answer. https://gist.github.com/708155 – geon Nov 20 '10 at 21:20
1

This: "text-overflow: ellipsis;" is all that is needed now in all current versions of IE, Opera, Firefox, Chrome & Safari so only need the work arounds (and "-o-text-overflow:") for older browser support. – GazB Oct 16 '12 at 10:51
1

What about a multi-line text solution? This will only work for single line of text. What for-example if I have place for 3 lines of text and I wand that '...' is added in the last line where the text is clipped? – Primoz Rome Sep 11 '13 at 11:43

pierre delaunay · Answer 2 · 2014-09-04T13:12:01.273

2

Just with some CSS like answer of Gordon. Just added the display:block property for an inline element like <a> or <p> :

a#myText{
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 300px;
}

You could use it with many browser like you can see on this link : http://caniuse.com/#search=text-overflow

edited Sep 04 '14 at 13:12

answered Sep 04 '14 at 10:39

pierre delaunay

21
4

score 0 · Answer 3 · answered Jan 21 '10 at 11:24

I had a similar problem, the way I solved it was to strip the string down to 60 characters and append an '...' to the end of it.

An ugly solution? Yes, but unless there is a jQuery solution it's probably your best bet.

If you're using Smarty, this is how I solved the problem:

{$my_string|truncate:60}

score 0 · Answer 4 · answered Jan 21 '10 at 11:46

Here's a function I use to truncate strings. Like most of the suggestions here, it uses substr to truncate the string, but it will avoid splitting the string mid-word:

function truncate_text($string, $min_chars, $append = ' &hellip;') {
    $chars = strpos($string, " ", $min_chars);
    $truncated_string = substr($string, 0, $chars) . $append;
    return $truncated_rstring;
}

score 0 · Answer 5 · answered Jan 21 '10 at 11:48

I think simple cutting text after N characters isn't what you're looking for. It's not a solution because the following text have both 15 character length: iiiiiiiiiiiiiii, mmmmmmmmmmmmmmm - notice that the second "word" is about three times longer than the first one.

JavaScript might be a solution:

First prepare your mark-up:
```
<p id="abc">{TEXT}</p>
```
Where {TEXT} is your text truncated to 150 characters + ...

Now when we've got a good base for JavaScript we can try to make what you're looking for:

<html>
<head> 
    <style type="text/css">
        #abc {
            width: 100px;
        }
    </style>
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function() {
            var ref  = document.getElementById("abc");
            var text = ref.text;

            ref.removeChild(ref.firstChild);
            ref.appendChild(document.createTextNode("..."));

            var maxHeight = ref.offsetHeight;

            var pos = 0;
            while (ref.offsetHeight <= maxHeight) {
                var insert = text.substring(0, ++pos) + "...";

                var finalReplace = ref.replaceChild(document.createTextNode(insert), ref.firstChild);
            }

            ref.replaceChild(finalReplace, ref.firstChild);
        }, false);
    </script>
</head>
<body>
    <p id="abc">My very, very, very, very, very, very, very long text...</p>
</body>
</html>

How do I indicate long text into a smaller fixed column with CSS?

5 Answers5

Linked

Related