プレーンなHTMLとCSSでテキストを切り捨てて、動的コンテンツが固定幅と高さのレイアウトに収まるようにする良い方法はありますか?
サーバー側をlogical幅(つまり、盲目的に推測された文字数)で切り捨てましたが、「w」は'i'これは最適ではない傾向があり、固定幅ごとに文字数を再推測(および調整)する必要があります。理想的には、ブラウザーで切り捨てが行われ、レンダリングされたテキストのphysical幅が認識されます。
IEには、私が望むものを正確に実行するtext-overflow: Ellipsis
プロパティがあることがわかりましたが、これはクロスブラウザーである必要があります。このプロパティ (やや?)標準のようです ですが、Firefoxではサポートされていません。 さまざまな回避策overflow: hidden
に基づいていますが、それらは省略記号を表示しません(コンテンツが切り捨てられたことをユーザーに知らせたい)、またはすべて表示します時間(コンテンツが切り捨てられなかった場合でも)。
動的レイアウトを固定レイアウトに収める良い方法はありますか、それとも論理幅によるサーバー側の切り捨ては今のところ得られるものですか?
更新:text-overflow: Ellipsis
がサポートされるようになりました Firefox 7以降(2011年9月27日リリース)。わーい!私の最初の答えは歴史的な記録として続きます。
Justin Maxwellには、クロスブラウザCSSソリューションがあります。ただし、Firefoxでテキストを選択できないという欠点があります。 Matt Sniderのブログへのゲスト投稿 で、この仕組みの詳細を確認してください。
この手法では、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
ファイルの内容
<?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>
ノードコンテンツの更新
Firefoxで機能する方法でノードのコンテンツを更新するには、次を使用します。
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の投稿 を参照してください。
2014年3月:CSSで長い文字列を切り捨てる:ブラウザのサポートに焦点を当てた新しい答え
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-text-overflow CSSプロパティは不要です。これはtext-overflow CSSプロパティの同義語ですが、6〜11のIEのバージョンは既にtext-overflow CSSプロパティをサポートしています。
Webブラウザ用のWindows OSで(Browserstack.comで)正常にテストされました:
Firefox:Simon Lieschkeが指摘したように(別の回答で)、FirefoxはFirefox 7以降(2011年9月27日リリース)のテキストオーバーフローCSSプロパティのみをサポートします。
Firefox 3.0およびFirefox 6.0でこの動作を再確認しました(テキストオーバーフローはサポートされていません)。
Mac OS Webブラウザーでさらにテストする必要があります。
注:省略記号が適用されている場合、マウスホバーにツールチップを表示することができます。これは、JavaScriptを使用して行うことができます。次の質問を参照してください: HTMLテキストオーバーフロー省略記号検出 および HTML-省略記号がアクティブになっているときにのみツールチップを表示するにはどうすればよいですか
リソース:
JavaScriptソリューションに問題がない場合は、クロスブラウザー方式でこれを行うjQueryプラグインがあります- http://azgtech.wordpress.com/2009/07/26/text-overflowを参照してください-Ellipsis-for-firefox-via-jquery /
OK、Firefox 7はtext-overflow: Ellipsis
とtext-overflow: "string"
を実装しました。最終リリースは2011-09-27に予定されています。
この問題の別の解決策は、次のCSSルールセットです。
.Ellipsis{
white-space:nowrap;
overflow:hidden;
}
.Ellipsis:after{
content:'...';
}
上記のCSSの唯一の欠点は、テキストがコンテナをオーバーフローするかどうかに関係なく、「...」を追加することです。それでも、多数の要素があり、コンテンツがオーバーフローすることが確実な場合は、これはより単純なルールのセットになります。
私の2セント。ジャスティン・マックスウェルによるオリジナルのテクニックに嫌気がさしている
参考までに、「バグ」追跡へのリンクを次に示します text-overflow:FirefoxでのEllipsisサポート 。 Firefoxのようなサウンドは、ネイティブCSSソリューションをサポートしない唯一の主要なブラウザです。