Я хочу знать, есть ли способ, которым вы можете позвонить и использовать то, что скрыто overflow:hidden.
Чтобы уточнить, что я имею в виду, в в этом примере Я хотел бы знать, что "Это скрыто" - это скрытая часть div.
Возможно ли это? Как вы подходите к нему?
Я пометил вопрос jQuery, но, конечно, все, что делается, отлично, чистый CSS или Javascript будет очень хорошо.
Спасибо заранее!
Попробуйте следующее:
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 />");
Это может дать оценку скрытого текста в конкретном случае, в котором текст в div может быть завершен.
<div class="text"><div id="inner">This is shown. This is hidden</div></div>
добавить в класс .text css:
line-height: 20px;
Во время выполнения вы можете использовать функцию jquery.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))));
Здесь мое решение (с помощью jQuery).
Разметка:
<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 содержит только текст. В основном это будет работать с встроенными элементами, такими как пролеты, но в настоящее время они вытесняют их во время процесса. Его можно легко зафиксировать, чтобы сохранить промежутки, но справляться с изображениями или другими осложнениями, такими как позиционированные элементы, гораздо более активно.
Попробуйте решение с помощью 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;
}