Jquery 知道什么溢出：隐藏已隐藏

我想知道是否有任何方法可以调用并使用

overflow:hidden

所隐藏的内容

为了澄清我的意思，我想知道“这是隐藏的”是div的隐藏部分

这可能吗？你会怎么做

我已经将这个问题标记为jQuery，但当然，无论完成了什么工作都很好，纯CSS或Javascript都可以

---

提前谢谢

这可以在div中的文本可以换行的特定情况下估计隐藏文本

 <div class="text"><div id="inner">This is shown. This is hidden</div></div>

在运行时，您可以使用.height（）jquery函数获取内部div的计算高度。将其除以行高，您可以获得文本已包装到的行数，其中只显示第一行。然后，您可以猜测最后一个显示/未显示的单词，并在那里对文本进行子串

var text = $("#inner").html();
var height = $("#inner").height();
var lineheight = $("div.text").height();
var rows = Math.round(height / lineheight);
alert("computed inner height: "
    + $("#inner").height()
    + " | rows: " + rows);
alert("Hidden text: "
    + text.substring(
        text.indexOf(" ",Math.round(text.length / rows))));

试试这个：

CSS:

HTML:

HTML:

如图所示。这是隐藏的
没有隐藏

JS:

（函数（$）{
$.fn.noOverflow=函数（）{
返回此值。每个（函数（）{
var el=$（本）；
var originalText=el.text（）；
var w=标高宽度（）；
var t=$（this.cloneNode（true））.hide（）.css({
'位置'：'绝对'，
“宽度”：“自动”，
“溢出”：“可见”，
“最大宽度”：“继承”
});
el.在（t）之后；
var text=原始文本；
而（text.length>0&&t.width（）>el.width（））{
text=text.substr（0，text.length-1）；
t、 文本（文本+“”）；
}
el.text（t.text（））；
/*
var oldW=标高宽度（）；
setInterval（函数（）{
如果（标高宽度（）！=oldW）{
oldW=标高宽度（）；
el.html（原始文本）；
el.省略号（）；
}
}, 200);
*/
此[“溢出文本”]={
hasOverflow:originalText！=el.text（）？真：假，
texOverflow:originalText.substr（el.text（）.length）
};
t、 删除（）；
});
};
})（jQuery）；
$（“#test1”）.noOverflow（）；
$（“#结果”）。追加（“测试1
”；
$（“#result”）.append（“Has Overflow:+（$（“#test1”）[0]。Overflow_text.hasOverflow）？“yes:“no”）+“
”；
$（“#result”）.append（“文本溢出：+$（“#test1”）[0]。溢出_Text.texOverflow+”
）；
$（“#test2”）.noOverflow（）；
$（“#结果”）。追加（“
测试2
”）；
$（“#result”）.append（“Has Overflow:+（$（“#test2”）[0]。Overflow_text.hasOverflow）？“yes:“no”）+“
”；
$（“#result”）.append（“文本溢出：+$（“#test2”）[0]。溢出_Text.texOverflow+”
）；

这是我的解决方案（使用jQuery）

标记：

<div class="text">This is shown. This is hidden</div>

.text{


    outline:1px solid orange;

    width:200px;
    height:20px;
    overflow:hidden;

}

$('.text').wrapInner('<div/>');
var originaltext = $('.text div').text();

var t = $('.text div').text();

while(true)
{
    if ($('.text div').height() <= $('.text').height()) { break; }

    $('.text div').text(t.substring(0, t.lastIndexOf(" ")));
    t = $('.text div').text();
}

$('.text div').text(originaltext);

alert("shown: " + originaltext.substring(0, t.length));
alert("hidden: " + originaltext.substring(t.length));

（只有溢出：隐藏实际上很重要，代码仍将使用不同的高度和宽度值。）

JS:

<div class="text">This is shown. This is hidden</div>

.text{


    outline:1px solid orange;

    width:200px;
    height:20px;
    overflow:hidden;

}

$('.text').wrapInner('<div/>');
var originaltext = $('.text div').text();

var t = $('.text div').text();

while(true)
{
    if ($('.text div').height() <= $('.text').height()) { break; }

    $('.text div').text(t.substring(0, t.lastIndexOf(" ")));
    t = $('.text div').text();
}

$('.text div').text(originaltext);

alert("shown: " + originaltext.substring(0, t.length));
alert("hidden: " + originaltext.substring(t.length));

$（'.text'）.wrapInner（''）；
var originaltext=$（'.text div'）.text（）；
var t=$（'.text div'）.text（）；
while（true）
{
如果（$（'.text div'）.height（）请使用jQuery尝试此操作

JQuery

$t = $('#text');

var shown, all, hiddenWidth;

// we start with the shown width set (via css) at 100px
shown = $t.width();

// we change the css to overflow:visible, float:left, and width:auto
$t.css({'overflow': 'visible', 'float': 'left', 'width': 'auto'});

// and get the total width of the text
all = $t.width();

// then we set the css back to the way it was
$t.css({'overflow': 'hidden', 'float': '', 'width': '100px'});

// and retrieve the hiddenWidth
hiddenWidth = all - shown;

HTML

<div id="text">This is shown. This is hidden</div>   

@gms8994抱歉输入错误！感谢编辑！！它总是简单的、没有样式的文本吗？带有
溢出：隐藏
的元素总是有
宽度和
高度吗？换句话说，你的例子有多做作？@thirtydot这实际上是个好问题！我不确定如何回答，因为我需要它现在，对于固定高度和宽度的非样式文本，我会发现这是一个非常有趣的答案，它也涵盖了其他情况，而不会让问题变得如此开放以至于无法回答。我解释过我自己吗？@Trufa：我想的是使用JS：用
标记括住每个单词。你可以阅读c的宽度/高度容器。你可以在每个跨度上迭代，查看宽度/高度，然后将它们相加。当添加的宽度和/或高度超过容器的宽度和/或高度时，你就知道所有后续的跨度标记都是隐藏的。@thirtydot好的，我想如果这样做有效，那将是一个很好的破解，但这将使代码（相当）完整太可怕了，不是吗？但这显然是一个非常特殊的情况，所以如果它变得有点难看，也没什么好抱怨的…@andres descalzo，邻居，我真的不明白如何用它来回应隐藏的东西…我正在用这个插件进行测试。当我完成你的步骤后，我也会对我有用。我希望你觉得它有用，问候语。“我只是在Chrome上试用过，没有测试过与其他浏览器的兼容性！！@andres Gracais！！很抱歉延迟注册！！完全忘记了..很好的答案，非常有用！！@Trufa谢谢；要获得更好的效果，一个怪癖就是压缩空白（就像浏览器一样），您可以通过正则表达式替换轻松完成。如果您的内部文本包含html，请记住在去除标记的文本上进行计算，如果内容包含图像，请记住高度（）函数返回图像完成后的实际图像高度downloading@guido谢谢你提醒我去掉标签，我肯定会忘记的！我不理解关于图像的说明，但是…@Trufa我的意思是，如果你把你的片段放在document.ready（）中，返回的图像高度可能是0（因为图像仍在加载中）。您应该将代码绑定到绑定到加载的某个处理程序（）@guido ohh！好的，那么就测试它吧！感谢您的澄清！！这很好，注释非常好！但我不知道您实际如何使用“This is hidden”hiddenWidth告诉您是否存在隐藏部分。我想现在的问题是，您是想向用户显示隐藏部分，还是想通过编程确定哪些内容不显示给用户
.text{


    outline:1px solid orange;

    width:200px;
    height:20px;
    overflow:hidden;

}

$('.text').wrapInner('<div/>');
var originaltext = $('.text div').text();

var t = $('.text div').text();

while(true)
{
    if ($('.text div').height() <= $('.text').height()) { break; }

    $('.text div').text(t.substring(0, t.lastIndexOf(" ")));
    t = $('.text div').text();
}

$('.text div').text(originaltext);

alert("shown: " + originaltext.substring(0, t.length));
alert("hidden: " + originaltext.substring(t.length));

$t = $('#text');

var shown, all, hiddenWidth;

// we start with the shown width set (via css) at 100px
shown = $t.width();

// we change the css to overflow:visible, float:left, and width:auto
$t.css({'overflow': 'visible', 'float': 'left', 'width': 'auto'});

// and get the total width of the text
all = $t.width();

// then we set the css back to the way it was
$t.css({'overflow': 'hidden', 'float': '', 'width': '100px'});

// and retrieve the hiddenWidth
hiddenWidth = all - shown;

<div id="text">This is shown. This is hidden</div>   

#text{
    outline:1px solid orange;
    width:100px;
    height:20px;
    overflow:hidden;
}