HTML/CSS: Specify number of lines inside

Question

I have a PHP-Webapp and a span, that looks something like this:

<span><?= $text ?></span>

I would like to make sure, that the span has only one line. So if the text is too long, I would like to not show the last words. Can I do that using HTML/CSS? Or do I have to shorten the text with PHP/Javascript?

Do you want to delete the words or do you want something like `overflow:hidden;`? — Marnix, Jan 20 '11 at 15:15
I dont care. The words should just not appear, so that the whole text fits in one line. I know I could delete the last workds with PHP /Javascript, but I would rather have something more easy in HTML/CSS... — Pascal Klein, Jan 20 '11 at 15:16

theorise · Accepted Answer · 2011-01-20T16:34:46.333

10

How about this? (obviously you would set thewidth to whatever it needs to be on the page)

The text-overflow: ellipsis is CSS3 and will only be supported in modern browsers, so in older ones you will get a nasty mid-letter/word cut off at the end.

span{display: block; width: 100px; overflow: hidden; word-wrap: break-word; text-overflow: ellipsis;}

edited Jan 20 '11 at 16:34

answered Jan 20 '11 at 15:17

theorise

7,245
14
46
65

2

Instead of height, you could also use: `word-wrap: break-word` – Marnix Jan 20 '11 at 15:26
Instead of word-wrap: break-word, I used: white-space: nowrap and it worked for me. – ivan gachmov Nov 18 '20 at 01:59

donkey · Answer 2 · 2021-10-09T11:32:35.727

5

I recommend to you below code

span {
        display: -webkit-box;
        -webkit-line-clamp: 2;  // <- you can change rows number
        -webkit-box-orient: vertical;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
}

edited Oct 09 '21 at 11:32

answered May 05 '20 at 10:29

donkey

478
7
10

`-webkit-line-clamp` seems to be a buggy legacy feature that corresponds to current standard `line-clamp` ([source](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp)). – Álvaro González May 05 '20 at 15:24

score 1 · Answer 3 · answered Jan 20 '11 at 15:31

Here's a rough and not fully tested idea:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<style type="text/css"><!--
p{
    margin: 1em 0;
    padding: 0;
}
span{
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 200px;
    vertical-align: bottom;
    white-space: nowrap;
    overflow: hidden;
}
--></style>
</head>
<body>

<p>This span (<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>&hellip;) is always 200px width.</p>

</body>
</html>

This proof of concept basically does this:

Make the span a block level element so it can be assigned a width.
Force the span to render in one line (given that the source string does not have <br> tags).
Hide overflowed content.
Fix margins and alignment so it stays at the same level than the parent element.

Improvements welcome.

score 0 · Answer 4 · answered Jan 20 '11 at 15:26

Here's a function that will do that:

function display_one_line($text) {
    $break = strpos($text, "\n");

    if ($break === false) {
        return $text;
    }

    return trim(substr($text, 0, $break));
}

Usage:

<span><?= display_one_line($text) ?></span>

but if you only need to do this one time, you can use this one-liner:

<span><?= (($break = strpos($text, "\n")) !== false ? substr($text, 0, $break) : $text) ?></span>

HTML/CSS: Specify number of lines inside

4 Answers4

Linked