如果内容太宽，则将省略号（...）插入HTML标记 [英] Insert ellipsis (...) into HTML tag if content too wide

问题描述

我有一个弹性布局的网页，如果浏览器窗口调整大小，它会改变它的宽度。

在这个布局中有标题（ h2 ），它将有一个可变长度（实际上是来自博客帖子的标题，我没有控制权）。目前 - 如果它们比窗口更宽 - 它们分成两行。

是否有一个优雅的，经过测试的（跨浏览器）解决方案 - 例如使用jQuery - 如果文本太宽而无法在当前屏幕/容器宽度中放入一行，则会缩短该标题标签的innerHTML并添加...？

解决方案

我有一个解决方案在FF3，Safari和IE6 +中使用单行和多行文本。

  .ellipsis {
 white-space：nowrap; 
 overflow：hidden; 
} 
 
 .ellipsis.multiline {
 white-space：normal; 
} 
 
将DIV类= 省略号 风格= 宽度：100像素;边界：1px的实心黑色; > Lorem存有悲坐阿梅特，consectetur adipisicing ELIT< / DIV> 
将DIV类= 省略号多 风格= 宽度：100像素;高度：40像素;边界：1px的实心黑色;边距：100像素 > Lorem存有悲坐阿梅特，consectetur adipisicing ELIT< / DIV> ; 
 
< script type =text / javascriptsrc =/ js / jquery.ellipsis.js>< / script> 
< script type =text / javascript> 
 $（。ellipsis）。ellipsis（）; 
< / script> 
  

jquery.ellipsis.js

<$ p $ （$）{
$ .fn.ellipsis = function（）
{
return this.each（function（）
{
var el = $（this）;

if（el.css（overflow）==hidden）
{
var text = el.html （）;
var multiline = el.hasClass（'multiline'）;
var t = $（this.cloneNode（true））
.hide（）
.css ''position'，'absolute'）
.css（'overflow'，'visible'）
.width（multiline？el.width（）：'auto'）
.height（multiline ？'auto'：el.height（））
;

el.after（t）;

函数height（）{return t.height（） > el.height（）;};
函数width（）{return t.width（）> el.width（）;};

var func =多行？高度宽度; （text.length> 0&& func（））
{
text = text.substr（0，text.length - 1）;

while
t.html（text +...）;
}

el.html（t.html（））;
t.remove（）;
}
}）;
};
}）（jQuery）;

I have a webpage with an elastic layout that changes its width if the browser window is resized.

In this layout there are headlines (h2) that will have a variable length (actually being headlines from blogposts that I don't have control over). Currently - if they are wider than the window - they are broken into two lines.

Is there an elegant, tested (cross-browser) solution - for example with jQuery - that shortens the innerHTML of that headline tag and adds "..." if the text would be too wide to fit into one line at the current screen/container width?

解决方案

I've got a solution working in FF3, Safari and IE6+ with single and multiline text

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
}

.ellipsis.multiline {
    white-space: normal;
}

<div class="ellipsis" style="width: 100px; border: 1px solid black;">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="ellipsis multiline" style="width: 100px; height: 40px; border: 1px solid black; margin-bottom: 100px">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>

<script type="text/javascript" src="/js/jquery.ellipsis.js"></script>
<script type="text/javascript">
$(".ellipsis").ellipsis();
</script>

jquery.ellipsis.js

(function($) {
    $.fn.ellipsis = function()
    {
        return this.each(function()
        {
            var el = $(this);

            if(el.css("overflow") == "hidden")
            {
                var text = el.html();
                var multiline = el.hasClass('multiline');
                var t = $(this.cloneNode(true))
                    .hide()
                    .css('position', 'absolute')
                    .css('overflow', 'visible')
                    .width(multiline ? el.width() : 'auto')
                    .height(multiline ? 'auto' : el.height())
                    ;

                el.after(t);

                function height() { return t.height() > el.height(); };
                function width() { return t.width() > el.width(); };

                var func = multiline ? height : width;

                while (text.length > 0 && func())
                {
                    text = text.substr(0, text.length - 1);
                    t.html(text + "...");
                }

                el.html(t.html());
                t.remove();
            }
        });
    };
})(jQuery);

这篇关于如果内容太宽，则将省略号（...）插入HTML标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！