html – 限定文本只有两行

html – 限定文本只有两行,第1张

概述我想将文本限制在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个字符,包括省略号,但有时当一个长 我想将文本限制在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 ataccelerating speed into theroad...

理想情况下,我想打破这个词的加速,或者填写尽可能多的字符,它可以在第一行继续第二行,有没有办法在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

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

希望有帮助.

总结

以上是内存溢出为你收集整理的html – 限定文本只有两行全部内容,希望文章能够帮你解决html – 限定文本只有两行所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1091585.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-27
下一篇 2022-05-27

发表评论

登录后才能评论

评论列表(0条)

保存