All geek questions in one place

HTML / CSS: specify the number of lines inside the <span>

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

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

I would like to make sure that the range has only one row. Therefore, if the text is too long, I would not want to show the last words. Can I do this using HTML / CSS? Or do I need to shorten text using PHP / Javascript?

+3
source share
3 answers

How about this? (obviously, you would set the bandwidth to be on the page)

Text overflow: ellipsis is CSS3 and is only supported in modern browsers, so in earlier versions you will get a disgusting mid / word at the end.

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

Here's a crude 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>

:

  • span , .
  • ( <br>).
  • .
  • , , .

.

+1

Here is the function that will do this:

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

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

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

Using:

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

but if you need to do this only once, you can use this single-line layer:

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

Source: https://habr.com/ru/post/1786696/

More articles:


All Articles