Знать, что переполнение: скрытый скрытый

Question

Я хочу знать, есть ли какой-нибудь способ, которым вы можете позвонить и использовать то, что overflow:hidden хорошо скрыло.

Чтобы пояснить, что я имею в виду, в этом примере я бы хотелзнать, что «Это скрыто» - это скрытая часть div.

Возможно ли это вообще?Как бы вы подошли к этому?

Я пометил вопрос jQuery, но, конечно, что бы ни выполняли работу, это замечательно, чистый CSS или Javascript отлично подойдут.

Заранее спасибо!

Answer 1

Попробуйте:

CSS:

.text{


    outline:1px solid orange;

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

}

HTML:

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

<div id="result"></div>

<div id="container" style="visibility:hidden;"></div>

JS:

$("<span />").text($(".text").text()).appendTo("#container"); 

$("#result").append("<span>"+$(".text").width()+"</span><br />");
$("#result").append("<span>"+$("#container span").width()+"</span><br />");

$("#result").append("<span>Overflow: "+ (($("#container span").width() > $(".text").width()) ? "yes" : "no")+"</span><br />");

Пример

РЕДАКТИРОВАТЬ

Попробуйте:

на основе этого плагина

НовоеПример

CSS:

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

HTML:

<br/>
<br/>
<div class="text" id="test1">This is shown. This is hidden</div>
<div class="text" id="test2">No hidden</div>
<br/>
<br/>
<div id="result"></div>

JS:

(function($) {

    $.fn.noOverflow = function(){

        return this.each(function() {

            var el = $(this);

            var originalText = el.text();
            var w = el.width();

            var t = $(this.cloneNode(true)).hide().css({
                'position': 'absolute',
                'width': 'auto',
                'overflow': 'visible',
                'max-width': 'inherit'
            });
            el.after(t);

            var text = originalText;
            while(text.length > 0 && t.width() > el.width()){
                text = text.substr(0, text.length - 1);
                t.text(text + "");
            }
            el.text(t.text());

            /*
            var oldW = el.width();
            setInterval(function(){
                if(el.width() != oldW){
                    oldW = el.width();
                    el.html(originalText);
                    el.ellipsis();
                }
            }, 200);
            */

            this["overflow_text"] = {
                hasOverflow: originalText != el.text() ? true : false,
                texOverflow: originalText.substr(el.text().length)
            };

            t.remove();

        });

    };

})(jQuery);

$("#test1").noOverflow();

$("#result").append("<span>Test 1</span><br />");

$("#result").append("<span>Has Overflow: "+ (($("#test1")[0].overflow_text.hasOverflow) ? "yes" : "no")+"</span><br />");

$("#result").append("<span>Text Overflow: "+ $("#test1")[0].overflow_text.texOverflow+"</span><br />");

$("#test2").noOverflow();

$("#result").append("<br /><span>Test 2</span><br />");
$("#result").append("<span>Has Overflow: "+ (($("#test2")[0].overflow_text.hasOverflow) ? "yes" : "no")+"</span><br />");
$("#result").append("<span>Text Overflow: "+ $("#test2")[0].overflow_text.texOverflow+"</span><br />");

Answer 2

Вот мое решение (с использованием jQuery).

Markup:

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

CSS:

.text{


    outline:1px solid orange;

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

}

(На самом деле имеет значение только переполнение: скрытый, код все равно будет работать с разными значениями высоты и ширины.)

JS:

$('.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));

Вот что он делает:

Мы сохраняем исходный текст в переменной, чтобы мы могли восстановить его позже.

Затем мы удаляем одно слово за раз, пока внутренний div не уменьшится до той же высоты, что и контейнер (со скрытым переполнением). Все, что осталось в div, было видно, а все, что нам нужно было удалить, было скрыто.

Ограничения

Мое решение предполагает, что div содержит только текст. Он будет в основном работать со встроенными элементами, такими как span, но в настоящее время удаляет их во время процесса. Его можно легко исправить, чтобы сохранить промежутки, но гораздо сложнее справиться с изображениями или другими сложностями, такими как расположенные элементы.

Answer 3

Это может дать оценку скрытого текста в конкретном случае, когда текст в div может переноситься.

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

добавить к классу .text css:

 line-height: 20px;

Во время выполнения вы можете использовать функцию jheery .height (), чтобы получить вычисленную высоту внутреннего 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))));

Answer 4

Попробуйте это решение , используя 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>   

CSS

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