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

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...

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.

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

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}

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;
}

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>

来源：https://stackoverflow.com/questions/2108740/how-do-i-indicate-long-text-into-a-smaller-fixed-column-with-css

标签

css

string

truncate