挿入省略(...)へのHTMLタグがコンテンツにも幅広
https://stackoverflow.com/questions/536814
-
22-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
私のウェブサイトの弾性レイアウトの変動幅の場合はブラウザウィンドウがリサイズされます。-
このレイアウトが見出し(h2 い可変長からの見出しからblogpostsがないの制御）となります。現在までよりも広いウィンドウのウィンドウかれます。
があり、エレガントな、ライト、テスト実施(クロスブラウザソり、例えば、jQueryが短縮さinnerHTMLのことを見出しタグを追加します"..."の場合はテキストを行うことができるのではな広ィをラインでの現在の画面/幅器?
解決
私は、単一および複数行のテキストでFF3、SafariとIE6 +で働いて解決策を持っている。
.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);
他のヒント
単一行のテキストを切り詰めるために、以下のCSS唯一の解決策は、 HTTPで記載されているすべてのたブラウザで動作します： //www.caniuse.com にFirefoxの6.0を除いて書くように。あなたは折り返し複数行のテキストまたはFirefoxの以前のバージョンをサポートする必要がない限り、JavaScriptが全く不要であることに注意してください。
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
あなたは、Firefoxの以前のバージョンのサポートが必要な場合は
そのおかげでこのコードを使用その他、以下の強化:
- このバイナリ検索のテキストの長さがあります。
- 取り扱う場合には省略要素については、当初の隠し設定をワンショットのショーイベントが再稼働を省略コードが最初に表示されます。これは便利のためのデータソースとなる文書リストはツリーの見所もん最初に表示されます。
- で任意に追加し、タイトル属性のテキストのためのhoveroverます。
- 追加
display: blockのスタイル、及ぶ作品 - この省略文字の代わりに3。
- で自動車として活動させて頂いており、スクリプトのために何をしました。省略クラス
CSS:
.ellipsis {
white-space: nowrap;
overflow: hidden;
display: block;
}
.ellipsis.multiline {
white-space: normal;
}
jquery.ellipsis.js
(function ($) {
// this is a binary search that operates via a function
// func should return < 0 if it should search smaller values
// func should return > 0 if it should search larger values
// func should return = 0 if the exact value is found
// Note: this function handles multiple matches and will return the last match
// this returns -1 if no match is found
function binarySearch(length, func) {
var low = 0;
var high = length - 1;
var best = -1;
var mid;
while (low <= high) {
mid = ~ ~((low + high) / 2); //~~ is a fast way to convert something to an int
var result = func(mid);
if (result < 0) {
high = mid - 1;
} else if (result > 0) {
low = mid + 1;
} else {
best = mid;
low = mid + 1;
}
}
return best;
}
// setup handlers for events for show/hide
$.each(["show", "toggleClass", "addClass", "removeClass"], function () {
//get the old function, e.g. $.fn.show or $.fn.hide
var oldFn = $.fn[this];
$.fn[this] = function () {
// get the items that are currently hidden
var hidden = this.find(":hidden").add(this.filter(":hidden"));
// run the original function
var result = oldFn.apply(this, arguments);
// for all of the hidden elements that are now visible
hidden.filter(":visible").each(function () {
// trigger the show msg
$(this).triggerHandler("show");
});
return result;
};
});
// create the ellipsis function
// when addTooltip = true, add a title attribute with the original text
$.fn.ellipsis = function (addTooltip) {
return this.each(function () {
var el = $(this);
if (el.is(":visible")) {
if (el.css("overflow") === "hidden") {
var content = el.html();
var multiline = el.hasClass('multiline');
var tempElement = $(this.cloneNode(true))
.hide()
.css('position', 'absolute')
.css('overflow', 'visible')
.width(multiline ? el.width() : 'auto')
.height(multiline ? 'auto' : el.height())
;
el.after(tempElement);
var tooTallFunc = function () {
return tempElement.height() > el.height();
};
var tooWideFunc = function () {
return tempElement.width() > el.width();
};
var tooLongFunc = multiline ? tooTallFunc : tooWideFunc;
// if the element is too long...
if (tooLongFunc()) {
var tooltipText = null;
// if a tooltip was requested...
if (addTooltip) {
// trim leading/trailing whitespace
// and consolidate internal whitespace to a single space
tooltipText = $.trim(el.text()).replace(/\s\s+/g, ' ');
}
var originalContent = content;
var createContentFunc = function (i) {
content = originalContent.substr(0, i);
tempElement.html(content + "…");
};
var searchFunc = function (i) {
createContentFunc(i);
if (tooLongFunc()) {
return -1;
}
return 0;
};
var len = binarySearch(content.length - 1, searchFunc);
createContentFunc(len);
el.html(tempElement.html());
// add the tooltip if appropriate
if (tooltipText !== null) {
el.attr('title', tooltipText);
}
}
tempElement.remove();
}
}
else {
// if this isn't visible, then hook up the show event
el.one('show', function () {
$(this).ellipsis(addTooltip);
});
}
});
};
// ellipsification for items with an ellipsis
$(document).ready(function () {
$('.ellipsis').ellipsis(true);
});
} (jQuery));
私の回答サポートするだけでなくシングルラインです。チェックgfullamコメントは下記のマルチラインフォークで見か期待できます。
無事に卒業できた私は、しばらくのコードからの回答に数回、このとできます。
まず見つける"推定"テキストの長さは、その後を追加または削除文字まで幅に通知するものとします。
ロジックで使用すると、次のようになる。
後は、"推定"テキストの長さが見つかった文字が追加または削除されるまで、ご希望の幅になります。
私の中で微調整を繰り返すが、こちらのコード:
(function ($) {
$.fn.ellipsis = function () {
return this.each(function () {
var el = $(this);
if (el.css("overflow") == "hidden") {
var text = el.html().trim();
var t = $(this.cloneNode(true))
.hide()
.css('position', 'absolute')
.css('overflow', 'visible')
.width('auto')
.height(el.height())
;
el.after(t);
function width() { return t.width() > el.width(); };
if (width()) {
var myElipse = "....";
t.html(text);
var suggestedCharLength = (text.length * el.width() / t.width()) - myElipse.length;
t.html(text.substr(0, suggestedCharLength) + myElipse);
var x = 1;
if (width()) {
while (width()) {
t.html(text.substr(0, suggestedCharLength - x) + myElipse);
x++;
}
}
else {
while (!width()) {
t.html(text.substr(0, suggestedCharLength + x) + myElipse);
x++;
}
x--;
t.html(text.substr(0, suggestedCharLength + x) + myElipse);
}
el.html(t.html());
t.remove();
}
}
});
};
})(jQuery);
私は本当にテキストの省略記号のすべての品種を扱うためのjQueryプラグインを冷却作っThreeDots @ HTTPと呼ばれるものです：// tpgblog。 COM / threedotsする
これは、はるかに高度な、カスタマイズ可能な行動との相互作用CSSのアプローチよりもはるかに柔軟だし、サポートしています。
お楽しみいただけます。
念のためにy'allのは、ここでは2013年に終わる - ここで私はここで見つける純粋なCSSのアプローチです：<のhref = "http://css-tricks.com/snippets/css/truncate-string-with-省略記号/」のrel = "noreferrer"> http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ の
.truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
これはうまく動作します。
省略符号（例えば「読み取りもっと」ボタン）の後に要素を維持し、onWindowResize更新するあなたを有効にする、より柔軟なjQueryプラグイン。また、マークアップテキストを回避します：
trunk8 jQueryのプラグインが複数行をサポートし、任意のHTMLを使用することができるだけでなく、切り捨て接尾辞のために、文字を省略記号： HTTPS ：//github.com/rviscomi/trunk8する
ここでデモ： http://jrvis.com/trunk8/する
がっかり直接的に こCSS を利用し、そのIE拡張ることは非標準FF支援 :after
こともでき こJS ご希望の場合は検scrollWidthの対象と比較することをその親幅が、まぁことはなりました。
編集：このように発展した超えているのだと思っていた。CSS3の支援が存在し、一部不完全な拡張でご利用いただけます。
- http://www.css3.info/preview/text-overflow/
- http://ernstdehaan.blogspot.com/2008/10/ellipsis-in-all-modern-browsers.html
前よりは良いです。
私は最近、クライアントのために何か似て行わだろう。ここでは（勝つVista上のすべての最新のブラウザのバージョンでテスト例）私は彼らのために何をしたかのバージョンがあります。すべてのボードの周りの完璧な、しかしかなり簡単に微調整することができません。
デモ： http://enobrev.info/ellipsis/する
コード：
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.2.6");
google.setOnLoadCallback(function() {
$('.longtext').each(function() {
if ($(this).attr('scrollWidth') > $(this).width()) {
$more = $('<b class="more">…</b>');
// add it to the dom first, so it will have dimensions
$(this).append($more);
// now set the position
$more.css({
top: '-' + $(this).height() + 'px',
left: ($(this).attr('offsetWidth') - $more.attr('offsetWidth')) + 'px'
});
}
});
});
</script>
<style>
.longtext {
height: 20px;
width: 300px;
overflow: hidden;
white-space: nowrap;
border: 1px solid #f00;
}
.more {
z-index: 10;
position: relative;
display: block;
background-color: #fff;
width: 18px;
padding: 0 2px;
}
</style>
</head>
<body>
<p class="longtext">This is some really long text. This is some really long text. This is some really long text. This is some really long text.</p>
</body>
</html>
まあ、かなり「...」を追加しませんが、2行に壊すから
を防ぐない1つの簡単な解決策は、CSSのこのビットを追加することです。
h2 {
height:some_height_in_px; /* this is the height of the line */
overflow:hidden; /* so that the second (or third, fourth, etc.)
line is not visible */
}
h2 {
height:some_height_in_px; /* this is the height of the line */
overflow:hidden; /* so that the second (or third, fourth, etc.)
line is not visible */
}
私はそれにいくつかのより多くの思考を与えた、と私は、あなたが別のタグ（例えばスパン）を使用してH2タグのテキストの内容をラップ（または所定の高さを持っているものとH2Sをラップする必要があり、この解決策を考え出しました）、その後、あなたが不要な単語を除外するためにはJavaScriptのこの種を使用することができます：
var elems = document.getElementById('conainter_of_h2s').
getElementsByTagName('h2');
for ( var i = 0, l = elems.length; i < l; i++) {
var span = elems.item(i).getElementsByTagName('span')[0];
if ( span.offsetHeight > elems.item(i).offsetHeight ) {
var text_arr = span.innerHTML.split(' ');
for ( var j = text_arr.length - 1; j>0 ; j--) {
delete text_arr[j];
span.innerHTML = text_arr.join(' ') + '...';
if ( span.offsetHeight <=
elems.item(i).offsetHeight ){
break;
}
}
}
}
ここでは別のJavaScriptのソリューションです。 非常に良いと非常に高速に動作します。
https://github.com/dobiatowski/jQuery.FastEllipsisする
WindowsとMac上でクロム、FF、IEでテストます。
純粋なCSSで複数行のテキストのためのソリューションがあります。それはline-clampと呼ばれるが、それは唯一のWebKitブラウザで動作です。すべての最新ブラウザでこれを模倣する方法があります（IE8よりも新しいすべてが。）また、あなたが最後の行の最後の言葉を非表示にするには、背景画像を必要とするので、それが唯一の固体背景で動作します。ここではそれが行く方法は次のとおりです。
このHTMLを考える：
<p class="example" id="example-1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
ここでCSSです：
p {
position:relative;
line-height:1.4em;
height:4.2em; /* 3 times the line-height to show 3 lines */
}
p::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
background:url(ellipsis_bg.png) repeat-y;
}
ellipsis_bg.pngは、あなたの背景の同じ色の画像であること、つまり、約100pxに広いことと、あなたの行の高さと同じ高さを持つことになります。
あなたのテキストが文字の途中での切断されてもよいが、それはいくつかのケースで有用である可能性があるようです。これは、非常にきれいではありません
参考：のhttp：//www.css- 101.org/articles/line-clamp/line-clamp_for_non_webkit-based_browsers.phpする
ピュアCSS複数行省略記号テキストコンテンツについてます：
.container{
position: relative; /* Essential */
background-color: #bbb; /* Essential */
padding: 20px; /* Arbritrary */
}
.text {
overflow: hidden; /* Essential */
/*text-overflow: ellipsis; Not needed */
line-height: 16px; /* Essential */
max-height: 48px; /* Multiples of line-height */
}
.ellipsis {
position: absolute;/* Relies on relative container */
bottom: 20px; /* Matches container padding */
right: 20px; /* Matches container padding */
height: 16px; /* Matches line height */
width: 30px; /* Arbritrary */
background-color: inherit; /* Essential...or specify a color */
padding-left: 8px; /* Arbritrary */
}<div class="container">
<div class="text">
Lorem ipsum dolor sit amet, consectetur eu in adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.
</div>
<div class="ellipsis">...</div>
</div>
ライブたとえばスニペットをチェックアウトしてください。
これはアレックスのに似ていますが、ログ時刻の代わりに、直線的にそれをしない、とのmaxHeightパラメータを取ります。
jQuery.fn.ellipsis = function(text, maxHeight) {
var element = $(this);
var characters = text.length;
var step = text.length / 2;
var newText = text;
while (step > 0) {
element.html(newText);
if (element.outerHeight() <= maxHeight) {
if (text.length == newText.length) {
step = 0;
} else {
characters += step;
newText = text.substring(0, characters);
}
} else {
characters -= step;
newText = newText.substring(0, characters);
}
step = parseInt(step / 2);
}
if (text.length > newText.length) {
element.html(newText + "...");
while (element.outerHeight() > maxHeight && newText.length >= 1) {
newText = newText.substring(0, newText.length - 1);
element.html(newText + "...");
}
}
};
https://gist.github.com/digulla/5796047する
を使用するには、ちょうどjQueryオブジェクトの省略記号（）を呼び出します。たとえばます：
。$（ "スパン"）省略記号（）;
私はMooToolsのライブラリに使用するためにアレックスの機能を書き直しました。私は少し言葉ジャンプにそれを変更するのではなく、単語の途中で省略記号を追加します。
Element.implement({
ellipsis: function() {
if(this.getStyle("overflow") == "hidden") {
var text = this.get('html');
var multiline = this.hasClass('multiline');
var t = this.clone()
.setStyle('display', 'none')
.setStyle('position', 'absolute')
.setStyle('overflow', 'visible')
.setStyle('width', multiline ? this.getSize().x : 'auto')
.setStyle('height', multiline ? 'auto' : this.getSize().y)
.inject(this, 'after');
function height() { return t.measure(t.getSize).y > this.getSize().y; };
function width() { return t.measure(t.getSize().x > this.getSize().x; };
var func = multiline ? height.bind(this) : width.bind(this);
while (text.length > 0 && func()) {
text = text.substr(0, text.lastIndexOf(' '));
t.set('html', text + "...");
}
this.set('html', t.get('html'));
t.dispose();
}
}
});
私はそれがそうjQueryのために自分をした望んでいたとおりに正確に働いていたスクリプトを見つけることができなかった - 彼らの方法の詳細を設定するには、かなりの数のオプション：）
を私はしかし、CSSの動作によって少し驚きました。
var cssEllipsis =
{ "width": "100%","display": "inline-block",
"vertical-align": "middle", "white-space": "nowrap",
"overflow": "hidden", "text-overflow": "ellipsis"
};
私は私が私の原因をsuppostなかった省略記号をバインドするために必要な先のコントロールに幅を提供しなければ。幅は、追加する必須プロパティです??? 自分の考えを入れてくださいます。
の省略を みCSS
<html>
<head>
<style type="text/css">
#ellipsisdiv {
width:200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div id="ellipsisdiv">
This content is more than 200px and see how the the ellipsis comes at the end when the content width exceeds the div width.
</div>
</body>
</html>
*このコード作品の多くは、ブラウザを推奨いたします。が生じた場合は、ただちに問題とオペラ-IE(かん)、addこれらのスタイル:
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
*この機能の一部であるCSS3.完全構文:
text-overflow: clip|ellipsis|string;
ます。http：// WWW
ここに建て省略記号を持っている素敵なウィジェット/プラグインライブラリがあります.codeitbetter.co.uk /ウィジェット/省略記号/
にあなたはそれがライブラリを参照し、以下を呼び出すために必要なのます：<script type="text/javascript">
$(document).ready(function () {
$(".ellipsis_10").Ellipsis({
numberOfCharacters: 10,
showLessText: "less",
showMoreText: "more"
});
});
</script>
<div class="ellipsis_10">
Some text here that's longer than 10 characters.
</div>
あなたはCSSで、この非常に簡単に行うことができる唯一の、例えば：SASSモード
.truncatedText {
font-size: 0.875em;
line-height: 1.2em;
height: 2.4em; // 2 lines * line-height
&:after {
content: " ...";
}
}
あなたは省略記号を持っている;）
ただ、@acSlaterように私は私が私が私自身をロールに必要なもののために何かを見つけることができませんでした。誰が使用できる場合には共有ます：
方法：ellipsisIfNecessary(mystring,maxlength);
trimmedString = ellipsisIfNecessary(mystring,50);
<html>
<head>
<!-- By Warren E. Downs, copyright 2016. Based loosely on a single/multiline JQuery using example by Alex,
but optimized to avoid JQuery, to use binary search, to use CSS text-overflow: ellipsis for end,
and adding marquee option as well.
Credit: Marquee: http://jsfiddle.net/jonathansampson/xxuxd/
JQuery version: http://stackoverflow.com/questions/536814/insert-ellipsis-into-html-tag-if-content-too-wide
(by Alex, http://stackoverflow.com/users/71953/alex)
(Improved with Binary Search as suggested by StanleyH, http://stackoverflow.com/users/475848/stanleyh)
-->
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<style>
.single {
overflow:hidden;
white-space: nowrap;
width: 10em;
padding: 10px;
margin: 0 auto;
border: solid 1px blue;
}
.multiline {
overflow: hidden;
white-space: wrap;
width: 10em;
height: 4.5em;
padding: 10px;
margin: 0 auto;
border: solid 1px blue;
}
.marquee {
overflow: hidden;
width: 40em;
padding: 10px;
margin: 0 auto;
border: solid 1px blue;
}
</style>
<script>
var _marqueeNumber=0;
// mode=start,end,middle
function clipText(text, len, mode) {
if(!mode) { mode="end"; }
else { mode=mode.toLowerCase(); }
if(mode == "start") { return "…"+clipText(text,len,"_start"); }
if(mode == "_start") { return text.substr(text.length - len); }
if(mode == "middle") {
return clipText(text, len/2, "end") + clipText(text, len/2, "_start");
}
return text.substr(0, len) + "…";
}
function generateKeyframes(clsName, start, end) {
var sec=5;
var totalLen=parseFloat(start)-parseFloat(end);
if(start.indexOf('em') > -1) { sec=Math.round(totalLen/3); }
else if(start.indexOf('px') > -1) { sec=Math.round(totalLen/42); }
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = 'body {}';
document.getElementsByTagName('head')[0].appendChild(style);
this.stylesheet = document.styleSheets[document.styleSheets.length-1];
try {
this.stylesheet.insertRule('.'+clsName+' {\n'+
' animation: '+clsName+' '+sec+'s linear infinite;\n'+
'}\n', this.stylesheet.rules.length);
this.stylesheet.insertRule('.'+clsName+':hover {\n'+
' animation-play-state: paused\n'+
'}\n', this.stylesheet.rules.length);
this.stylesheet.insertRule('@keyframes '+clsName+' {\n'+
' 0% { text-indent: '+start+' }\n'+
' 100% { text-indent: '+end+' }\n'+
'}', this.stylesheet.rules.length);
} catch (e) {
console.log(e.message);
}
}
function addClone(el, multiline, estyle) {
if(!estyle) {
try { estyle=window.getComputedStyle(el); }
catch(e) { return null; }
}
var t = el.cloneNode(true);
var s=t.style;
//s.display='none';
s.visibility='hidden'; // WARNING: Infinite loop if this is not hidden (e.g. while testing)
s.display='inline-block';
s.background='black';
s.color='white';
s.position='absolute';
s.left=0;
s.top=0;
s.overflow='visible';
s.width=(multiline ? parseFloat(estyle.width) : 'auto');
s.height=(multiline ? 'auto' : parseFloat(estyle.height));
el.parentNode.insertBefore(t, el.nextSibling);
return t;
}
function getTextWidth(el, multiline) {
var t=addClone(el, multiline);
if(!t) { return null; }
var ts=window.getComputedStyle(t);
var w=ts.width;
if(multiline) {
var es=window.getComputedStyle(el);
var lines=Math.round(parseInt(ts.height)/parseInt(es.height))*2+0.5;
w=w+'';
var unit=''; // Extract unit
for(var xa=0; xa<w.length; xa++) {
var c=w[xa];
if(c <= '0' || c >= '9') { unit=w.substr(xa-1); }
}
w=parseFloat(w);
w*=lines; // Multiply by lines
w+=unit; // Append unit again
}
t.parentNode.removeChild(t);
return w;
}
// cls=class of element to ellipsize
// mode=start,end,middle,marq (scrolling marquee instead of clip)
function ellipsis(cls, mode) {
mode=mode.toLowerCase();
var elems=document.getElementsByClassName(cls);
for(xa in elems) {
var el=elems[xa];
var multiline = el.className ? el.className.indexOf('multiline') > -1 : true;
if(mode == "marq") {
var w=getTextWidth(el, multiline);
if(!w) { continue; }
var mCls="dsmarquee"+(_marqueeNumber++);
var es=window.getComputedStyle(el);
generateKeyframes(mCls,es.width, '-'+w);
el.className+=" "+mCls;
continue;
}
if(mode == "end" && !multiline) { el.style.textOverflow="ellipsis"; continue; }
var estyle=null;
try { estyle=window.getComputedStyle(el); }
catch(e) { continue; }
if(estyle.overflow == "hidden") {
var text = el.innerHTML;
var t=addClone(el, multiline, estyle);
function height() {
var ts=window.getComputedStyle(t);
var es=window.getComputedStyle(el);
return parseFloat(ts.height) - parseFloat(es.height);
}
function width() {
var ts=window.getComputedStyle(t);
var es=window.getComputedStyle(el);
return parseFloat(ts.width) - parseFloat(es.width);
}
var tooLong = multiline ? height : width;
var len=text.length;
var diff=1;
var olen=0;
var jump=len/2;
while (len > 0) {
var diff=tooLong();
if(diff > 0) { len-=jump; jump/=2; }
else if(diff < 0) { len+=jump; }
len=Math.round(len);
//alert('len='+len+';olen='+olen+';diff='+diff+';jump='+jump+';t='+JSON.stringify(t.innerHTML));
t.innerHTML=clipText(text, len, mode);
if(olen == len) { break; }
olen=len;
}
el.innerHTML=t.innerHTML;
t.parentNode.removeChild(t);
}
//break;
t.style.visibility='hidden';
}
}
function testHarness() {
ellipsis('ellipsis1', 'start');
ellipsis('ellipsis2', 'end');
ellipsis('ellipsis3', 'middle');
ellipsis('marquee', 'marq')
}
</script>
</head>
<body onload="testHarness()">
<div class="single ellipsis1" style="float:left">some long text that should be clipped left</div>
<div class="single ellipsis2" style="float:right">right clip long text that should be clipped</div>
<div class="single ellipsis3" style="float:center">some long text that should be clipped in the middle</div>
<br />
<p class="single marquee">Windows 8 and Windows RT are focused on your life—your friends and family, your apps, and your stuff. With new things like the <a href="http://windows.microsoft.com/en-US/windows-8/start-screen">Start screen</a>, <a href="http://windows.microsoft.com/en-US/windows-8/charms">charms</a>, and a <a href="http://windows.microsoft.com/en-US/windows-8/microsoft-account">Microsoft account</a>, you can spend less time searching and more time doing.</p>
<br />
<div class="multiline ellipsis1" style="float:left">Test test test test test test, some more long text, such as asdasdasdasdasd, that should be multiline clipped left(*)</div>
<div class="multiline ellipsis2" style="float:right">right clip multiline long text, such as Test test test test test test, and some more long text that should be multiline clipped right.</div>
<div class="multiline ellipsis3" style="float:center">Test test test test test test, some more long text, such as asdasdasdasdasd, that should be multiline clipped in the middle(*)</div>
<br />
<p class="multiline marquee">Multiline Marquee: Windows 8 and Windows RT are focused on your life—your friends and family, your apps, and your stuff. With new things like the <a href="http://windows.microsoft.com/en-US/windows-8/start-screen">Start screen</a>, <a href="http://windows.microsoft.com/en-US/windows-8/charms">charms</a>, and a <a href="http://windows.microsoft.com/en-US/windows-8/microsoft-account">Microsoft account</a>, you can spend less time searching and more time doing.</p>
</body>
</html>
所属していません StackOverflow
