CSSで長い文字列を切り詰める：まだ実行可能ですか？

Question

プレーンなHTMLとCSSでテキストを切り捨てて、動的コンテンツを幅と高さの固定レイアウトに収める方法はありますか？

の幅（すなわち、盲目的に推測される文字数）でサーバ側を切り捨てましたが、 'w'が 'i'よりも広いため、これは最適ではない傾向があります。私は固定幅ごとに文字数を再推測する（そして微調整し続ける）。理想的には、レンダリングされたテキストの幅がという物理的なのブラウザで切り捨てられます。

IEにはtext-overflow: ellipsisのプロパティがありますが、これは正確に私が望むものですが、クロスブラウザである必要があります。このプロパティはseems to be (somewhat?) standardですが、Firefoxではサポートされていません。私は、overflow: hiddenに基づいてvariousworkaroundsを見つけましたが、省略記号（コンテンツが切り捨てられたことをユーザーに知らせてもらいたい）を表示しないか、コンテンツが切り捨てられていない場合でも常に表示します。

誰かが固定レイアウトで動的テキストをフィッティングする良い方法があるのですか、それとも論理的な幅によるサーバー側の切り捨てが今のところうまくいくのでしょうか？

Answer 1

更新：Firefoxの7のようtext-overflow: ellipsis is now supported（2011年9月27日にリリース）。わーい！私の元の答えは歴史的な記録として続く。

ジャスティン・マックスウェルには、クロスブラウザのCSSソリューションがあります。 Firefoxではテキストを選択できないという欠点があります。これがどのように機能するかについては、his guest post on Matt Snider's blogをご覧ください。

この方法では、FirefoxのinnerHTMLプロパティを使用してJavaScript内のノードの内容を更新することもできません。回避策については、この記事の最後を参照してください。

CSS

.ellipsis { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis; 
    -moz-binding: url('assets/xml/ellipsis.xml#ellipsis'); 
} 

ellipsis.xmlファイルの内容Firefoxの使用中の動作方法でノードの内容を更新するには、ノードのコンテンツ

を更新

<?xml version="1.0"?> 
<bindings 
    xmlns="http://www.mozilla.org/xbl" 
    xmlns:xbl="http://www.mozilla.org/xbl" 
    xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" 
> 
    <binding id="ellipsis"> 
     <content> 
      <xul:window> 
       <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description> 
      </xul:window> 
     </content> 
    </binding> 
</bindings> 

フォールド下限：

var replaceEllipsis(node, content) { 
    node.innerHTML = content; 
    // use your favorite framework to detect the gecko browser 
    if (YAHOO.env.ua.gecko) { 
     var pnode = node.parentNode, 
      newNode = node.cloneNode(true); 

     pnode.replaceChild(newNode, node); 
    } 
}; 

Matt Snider's post for an explanation of how this worksを参照してください。

Answer 2

あなたがJavaScriptの溶液でOKであれば、jQueryのプラグインクロスブラウザの方法でこれを行うにはあります - 参照http://azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis-for-firefox-via-jquery/

Answer 3

参考のため、ここに「バグ」トラッキングtext-overflow: ellipsis support in Firefoxのリンクがあります。 Firefoxのようなサウンドは、ネイティブCSSソリューションをサポートしていない唯一の主要なブラウザです。この問題に対する別の解決策は、CSSルールの以下のセット可能性があり

Answer 4

：

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

.ellipsis:after{ 
    content:'...'; 
} 

上記CSSとの唯一の欠点は、それが「を追加することです...コンテントがオーバーフローするかどうかにかかわらず、要素の束があり、コンテンツがオーバーフローすることが確実な場合は、これはより単純なルールのセットになります。

。2セントジャスティンマクスウェルによるオリジナル技術

Answer 5

OKに脱帽、Firefoxの7はtext-overflow: ellipsisだけでなく、text-overflow: "string"を実装する最終リリースは2011年9月27日に予定されて

Answer 6

2014月：。。と切り捨て、長い文字列をCSS：ブラウザサポートを中心とした新しい回答

デモon http://jsbin.com/leyukama/1/（私は古いバージョンのIEをサポートしているのでjsbinを使用しています）

<style type="text/css"> 
    span { 
     display: inline-block; 
     white-space: nowrap; 
     overflow: hidden; 
     text-overflow: ellipsis;  /** IE6+, Firefox 7+, Opera 11+, Chrome, Safari **/ 
     -o-text-overflow: ellipsis; /** Opera 9 & 10 **/ 
     width: 370px; /* note that this width will have to be smaller to see the effect */ 
    } 
</style> 

<span>Some very long text that should be cut off at some point coz it's a bit too long and the text overflow ellipsis feature is used</span> 

-msテキストオーバーフローCSSプロパティは必要ありません：それは、テキストオーバーフローCSSプロパティの同義語であるが、6から11までIEのバージョンは、既にテキストオーバーフローCSSプロパティをサポートします。

に成功しましたWebブラウザは、Windows OS上で（Browserstack.comに）テスト：

• IE6 IE11
• オペラ10.6、オペラ11.1、オペラ15.0、オペラ20.0
• クロム14、Chromeに20、クロム25
• サファリ4.0、サファリ5.0、サファリ5.1
• のFirefox 7.0、Firefoxの15

Firefox：Simon Lieschke（別の​​回答）が指摘しているように、FirefoxはFirefox 7以降のテキストオーバーフローCSSプロパティ（2011年9月27日リリース）のみをサポートしています。

Firefox 3.0でこの現象をダブルチェックしました& Firefox 6.0（テキストオーバーフローはサポートされていません）。

Mac OSウェブブラウザでのテストが必要になります。

注：省略記号が適用されたときに、マウスのホバーでツールチップを表示することがあり、これはjavascriptを介して行うことができ、この質問を参照してください。HTML text-overflow ellipsis detectionとHTML - how can I show tooltip ONLY when ellipsis is activated

資源：

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#Browser_compatibility
を
• http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
• https://stackoverflow.com/a/1101702/759452
• http://www.browsersupport.net/CSS/text-overflow
• http://caniuse.com/text-overflow
• http://msdn.microsoft.com/en-us/library/ie/ms531174(v=vs.85).aspx
• http://hacks.mozilla.org/2011/09/whats-new-for-web-developers-in-firefox-7/

Answer 7

.truncate { 
    width: 250px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}