ansaurus

Question

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

Answer 1

+1 A:

adam 2010-01-21 11:24:26

This doesn't work right, since the string can have more or less CAPS or wider character... so if you take substring of fixed character (100 as you suggest) can output of different width when page renders. Try strings like:MMMMMMMMMMMMMMMMMMMM oriiiiiiiiiiiiiiiiiiiand you see you already have a difference.

Primoz Rome 2010-01-21 13:00:07

Hence what I said about outputting text in a fixed-width font.

adam 2010-01-21 13:05:40

Answer 2

A:

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}

ILMV 2010-01-21 11:24:50

Answer 3

A:

You can use PHP's wordwrap function for that :)

Example:

$text = "The quick brown fox jumped over the lazy dog.";
$newtext = wordwrap($text, 20, "<br />\n");

echo $newtext;

Sarfraz 2010-01-21 11:24:56

The OP wants to truncate the text rather than wrap it (although I agree wrapping might make more sense in some cases)

adam 2010-01-21 11:26:55

Tried this but it doens't give me the result I want! I want to fit the text into width of 100 pixels and not fixed number of characters...

Primoz Rome 2010-01-21 13:01:16

Answer 4

A:

Use substr and find out how many characters fit into the column. E.g.

$string = substr($string, 0, 10) . '...'

if 13 characters fit into the column

Felix Kling 2010-01-21 11:25:57

You cannot find out how many characters fit into a column. It depends on the font used in the browser and the zoom level of the page.

Gordon 2010-01-21 11:30:58

@Gordon you're assuming the output is html. What if this is a command line script?

adam 2010-01-21 11:36:35

@adam Why would the question be tagged CSS then?

Gordon 2010-01-21 11:43:52

Answer 5

A:

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

David Heggie 2010-01-21 11:46:48

Answer 6

A:

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 &lt;= maxHeight) {
            var insert = text.substring(0, ++pos) + "...";


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


        ref.replaceChild(finalReplace, ref.firstChild);
    }, false);
&lt;/script&gt;


</head>
<body>
    <p id="abc">My very, very, very, very, very, very, very long text...</p>
</body>
</html>

Crozin 2010-01-21 11:48:21

Answer 7

+3 A:

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 */
}

Check out this article about the CSS3 property text-overflow. Firefox currently (3.5.7) does not support this yet, but there is some workarounds.

Gordon 2010-01-21 12:12:17

But this wont add me "..." at the end of the string...

Primoz Rome 2010-01-21 13:11:17

Yes, it will. Read through the pages, I've linked for compatibility across browsers and workarounds.

Gordon 2010-01-21 13:42:50

Ahh sorry. Thanks man, looks promising.

Primoz Rome 2010-01-21 13:56:45

ansaurus

tags:

views:

answers:

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

related questions