我如何模仿文本溢出：在Firefox中的省略号？ [英] How can I mimic text-overflow: ellipsis in Firefox?
问题描述
我有一些动态文本包含在一个div，设置为用户在textbox字段中输入的任何内容。如果文本不适合在div，现在它只是在边缘被切断，所有延伸超过边界的文本是不可见的。我想截断文本，使其适合在框内，并在末尾添加一个省略号（...）。例如：
I have some dynamic text contained in a div that is set to whatever a user enters in a textbox field. If the text doesn't fit in the div, right now it just gets cut off at the edge and all the text that extends past the border is not visible. I would like to truncate the text so that it fits inside the box and has an ellipsis (...) appended on the end. For example:
|----div width------|
Here is some sample text that is too long.
Here is some sam...
很明显，在这个例子中，使用固定宽度的字体，所以它就像计数字符一样简单。我有一个可变宽度的字体，所以如果他们输入WWWWWWWWWWW，它将填充少得多的字符比................会。
Obviously in the example it's easy because the code tag uses a fixed-width font so it's as simple as counting characters. I have a variable-width font so if they enter "WWWWWWWWWWW" it will fill up in much fewer characters than "................" would.
这是最好的方法是什么？我发现一个潜在的解决方案，只需找到文本的实际像素宽度在这里： http://www.codingforums.com/archive/index.php/t-100367.html
What's the best way to do this? I found a potential solution for simply finding the actual pixel width of the text here: http://www.codingforums.com/archive/index.php/t-100367.html
但即使使用类似的方法，有点尴尬地实现省略号。所以如果它是20个字符，我发现它不适合，我将截断到19，添加省略号，然后检查它是否适合。然后截断到18（加上省略号），然后重试。然后再次。再次...直到适合。有更好的方法吗？
But even with a method like that, it's a bit awkward to implement the ellipsis. So if it's 20 characters and I find that it doesn't fit, I would have to truncate to 19, add the ellipsis, and then check if it fits again. Then truncate to 18 (plus the ellipsis) and try again. And again. And again...until it fit. Is there a better way?
编辑：我已经决定根据答案，我原来的方法是最好的，除了我已经尝试改进的解决方案上面的链接
I have decided based on the answers that my original approach is best, except I have tried to improve on the solution in the link above by not creating a separate td element simply for measuring, which feels like a hack.
这是我的代码：
<div id="tab" class="tab">
<div id="tabTitle" class="tabTitle">
<div class="line1">user-supplied text will be put here</div>
<div class="line2">more user-supplied text will be put here</div>
</div>
</div>
和样式：
.tab {
padding: 10px 5px 0px 10px;
margin-right: 1px;
float: left;
width: 136px;
height: 49px;
background-image: url(../images/example.gif);
background-position: left top;
background-repeat: no-repeat;
}
.tab .tabTitle {
height: 30px;
width: 122px;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
font-weight: bold;
color: #8B8B8B;
}
.tab .tabTitle .line1, .tab .tabTitle .line2 {
display:inline;
width:auto;
}
和修剪和添加省略号的javascript：
and the javascript that trims and adds the ellipsis:
function addOverflowEllipsis( containerElement, maxWidth )
{
var contents = containerElement.innerHTML;
var pixelWidth = containerElement.offsetWidth;
if(pixelWidth > maxWidth)
{
contents = contents + "…"; // ellipsis character, not "..." but "…"
}
while(pixelWidth > maxWidth)
{
contents = contents.substring(0,(contents.length - 2)) + "…";
containerElement.innerHTML = contents;
pixelWidth = containerElement.offsetWidth;
}
}
line1和line2到函数。它在诸如WWWWWWWWWWWWWWWWW的单字输入的情况下工作，但是不工作多字输入WWWWW WWWWWWWWWW，因为它只是添加换行符并且将文本测量为WWWWW的宽度。
The "line1" and "line2" divs get passed to the function. It works in the case of a single word input like "WWWWWWWWWWWWWWWWW" but does not work a multi-word input "WWWWW WWWWW WWWWW" because it just adds line breaks and measures the text as being the width of "WWWWW".
有没有办法解决这个问题，而不用将文本复制到隐藏的测量元素？一些方法来设置行div的样式，以便它们不包装文本？
Is there a way I can fix this without resorting to copying the text into a hidden measuring element? Some way to set the style of the line divs so that they don't wrap text?
推荐答案
Some way to set the style of the line divs so that they don't wrap text?
有些方法可以设置行div的样式，这里有 white-space：nowrap 。是的，这在古代浏览器中也有效。
There you have the white-space: nowrap for. Yes, this works in ancient browsers as well.
这篇关于我如何模仿文本溢出：在Firefox中的省略号？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
