Question

我有一个PHP-Webapp和span，看起来像这样：

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

我想确保跨度只有一行。因此，如果文字太长，我想不显示最后的话。我可以使用HTML / CSS吗？或者我是否必须使用PHP / Javascript缩短文本？

Answer 1

这个怎么样？ （显然你会将宽度设置为页面上需要的宽度）

文本溢出：省略号是CSS3，只会在现代浏览器中支持，所以在较旧版本中，你会在最后得到一个令人讨厌的中间字母/单词。

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

Answer 2

这是一个粗略且未经过充分测试的想法：

<!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>个标记）。
隐藏溢出的内容。
修复边距和对齐方式，使其与父元素保持同一级别。

欢迎改进。

Answer 3

这是一个可以做到这一点的功能：

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

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

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

用法：

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

但如果你只需要这样做一次，你可以使用这个单行：

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

Answer 4

我向您推荐以下代码

span {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
}

HTML / CSS：指定<span> </span>内的行数

4 个答案: