查找文本将占用多少行

我有一个产品列表，其中写有产品的标题。我想要做的是检查产品标题是否超过2行，并且在这种情况下，只需打印2行，并将“...”放在最后。查找文本将占用多少行

任何想法？

来源

2012-06-15 Leandro Zhuzhi

你如何定义 “两线”？ – Mike

[你有什么尝试？]（http://whathaveyoutried.com/） – sczizzo

的一个问题是，字体渲染甚至可以在不同的版本，并在不同的操作系统是从浏览器到浏览器不同。所以在预先计算文本的长度/高度时，并不那么容易。你可以做这样的事情：

创建一个字段的最大高度
集这一领域的溢出隐藏
编写JavaScript代码执行以下操作：

1获取文本
2切断了最后一个词（usin GA正则表达式或类似的东西）
3检查容器是否仍具有溢出
4执行步骤2和3这么久，直到没有更多的溢出
5切断多了一个字（你仍然可以有情况下，你没有空间“...”）
6追加“...”

，如果你有一个纯文本这一次才有效。如果你在标题中有标签，像这样的东西可能会把你的HTML结构搞得一团糟。想象一下，这个结果是一个开放的“<范围>” - 标签永远不会关闭...... :)

你的正则表达式/文字查找器也应该是如此聪明，以切除“词分离”的东西。

我不知道这是否是一个非常好的方法，但也许有点帮助，因为使用jQuery，这只会是4-5行。

来源

2012-06-15 01:09:54 insertusernamehere

这听起来很有趣。我尽量避免使用jQuery，所以我会试试这个。我认为最好先追加“...”，然后用正则表达式去掉最后一个单词。这样，您就避免了最后一个字是1-2个字符而没有更多空间的情况，并且删除该字段并尝试为“...”添加3个字符，在这种情况下，一个点仍然会溢出。 –

是的，上面的例子可以通过这种方式进行优化。我找到了一个解决方案，其中有最小的代码可能在这里：http://jsfiddle.net/MPkSF/151/ – insertusernamehere

你将需要玩弄你的设计，看看有多少角色将等于两行。如果你没有使用固定字体，你必须看一堆案例。

我使用此功能在我的一个网站上执行此操作。这会修剪到某个最大数量的字符，然后在字符串结尾之前的第一个空格处打断字符串。可能发生的

function str_tr($string,$max) 
{ 
if(strlen($string)>$max) 
{ 
    $string = substr($string,0,$max); 
    $i = strrpos($string," "); 
    $string = substr($string,0,$i); 
    $string .= "..."; 
} 
return $string; 
}

来源

2012-06-15 01:00:29 cpilko

正如@cpilko说...如果它不是一个固定大小的字体......它不会是肯定的工作...

30我（小字符）与W的非固定字体

iiiiiiiiiiiiiiiiiiiiiiiiiiiiii（大字符）

wwwwwwwwwwwwwwwwwwwwwwwwwwwwww

但是，在固定大小的字体......事情更容易预测：

iiiiiiiiiiiiiiiiiiiiiiiiiiiiii 
wwwwwwwwwwwwwwwwwwwwwwwwwwwwww

来源

2012-06-15 01:14:19

你需要的是文本溢出CSS属性。它使用CSS来切断固定宽度容器中的多余文本，并用省略号字符替换溢出。更多详情：

http://www.quirksmode.org/css/textoverflow.html

来源

2012-06-15 02:33:29 austincheney

，只适用于一行，我希望它与2行 –

最后我做这样的事情：

<p id="titleContainer">blabla bla bla blablabla bla blabla bla bla blablabla bla blabla bla bla blablabla bla</p> 

<script type="text/javascript"> 
    function checkOverflow(el){ 
    var curOverflow = el.style.overflow; 
    if (!curOverflow || curOverflow === "visible"){ 
     el.style.overflow = "hidden"; 
    } 

    // 26 pixels was the height of 2 lines 
    var isOverflowing = el.scrollHeight > 26; 
    el.style.overflow = curOverflow; 
    return isOverflowing; 
    } 

    var titleContainer = document.getElementById("titleContainer"); 
    var titleTxt = titleContainer.innerHTML + "..."; 

    while(checkOverflow(titleContainer)){ 
    titleTxt = titleTxt.replace(/ [^ ]+\.\.\.$/, "..."); 
    titleContainer.innerHTML = titleTxt; 
    } 
</script>

来源

2012-06-15 18:55:15

查找文本将占用多少行

回答

相关问题