html – 限定文本只有两行

前端之家收集整理的这篇文章主要介绍了html – 限定文本只有两行前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想将文本限制在html电子邮件中的宽度为150px的固定数量的行,例如:
Long text continues down the road into a lane and doesn't stop there

我希望它看起来像这样:

Long text continues down 
the road into a lane and...

我截断字符串最多45个字符,包括省略号,但有时当一个长字存在时,它会分为三行:

Long text continues at
accelerating speed into the
road...

理想情况下,我想打破这个词的加速,或者填写尽可能多的字符,它可以在第一行继续第二行,有没有办法在html? (我看着这个单词,但显然在所有的电子邮件客户端都不支持)

此外,由于这是电子邮件客户端,我也不能做任何javascript等.

解决方法

CSS解决方

你可以设置一个高度并做溢出隐藏.

span {
    display: inline-block;
    border: black 1px solid;
    width: 300px;
    height: 40px;
    overflow: hidden;
}

示例:http://jsfiddle.net/imoda/REs2Q/

PHP解决方

服务器端的替代方法是使用substr

<?PHP

    $string = "Oh squiggly line in my eye fluid. I see you lurking there on the peripheral of my vision. But when I try to look at you,you scurry away. Are you shy,squiggly line? Why only when I ignore you,do you return to the center of my eye? Oh,squiggly line,it's alright,you are forgiven.";

    echo charlimit($string,100);

    function charlimit($string,$limit) {

        return substr($string,$limit) . (strlen($string) > $limit ? "..." : '');
    }

?>

示例:http://codepad.org/OetkaMh6

这将输出100个字符的字符串,然后附加…与此相反,您必须将字符数更改为最适合您的情况.因为它是服务器端,它不会知道每个方案需要多少字符才能触发一个回车.

或者,您可以限制字数:

<?PHP

    $string = "Oh squiggly line in my eye fluid. I see you lurking there on the peripheral of my vision. But when I try to look at you,you are forgiven.";

    echo wordlimit($string,20);

    function wordlimit($string,$limit) {

        $overflow = true;

        $array = explode(" ",$string);

        $output = '';

        for ($i = 0; $i < $limit; $i++) {

            if (isset($array[$i])) $output .= $array[$i] . " ";
            else $overflow = false;
        }

        return trim($output) . ($overflow ? "..." : '');
    }

?>

示例:http://codepad.org/WYJFPaD5

但是这是一回事,你必须定制“最适合”

希望有帮助.

原文链接:https://www.f2er.com/html/229736.html

猜你在找的HTML相关文章