1

メッセージがエコーされるコンテナがあります。ユーザーが生成したように、メッセージ自体には固定サイズがありませんが、長すぎるテキスト文字列が送信されると、コンテナをオーバーフローする可能性があります。デザインを崩す..

ボックスにテキストをトリミングさせ...、別のページにテキストへのリンクを配置することができます。

を使用することでこれを確実に止めることができますがoverflow:hidden、単純に切り捨てるのではなく、よりエレガントなアプローチが必要です。css3でこのようなことを読んだことを覚えているようですが、私の人生では、それが何と呼ばれていたのかわかりません。

ここで問題の jsfiddle を作成しました - http://jsfiddle.net/6Fk7B/

4

5 に答える 5

1

CSS プロパティtext-overflow:ellipsis、ただしブラウザのサポートはさまざま

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

于 2013-05-14T18:55:44.213 に答える
1 
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

それはあなたのためにそれをするはずです。すべてを含める必要があります。

次のブラウザ プレフィックスを含めることもできます。

-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;

すべてのブラウザーで完璧であるとは限りませんが、ほとんどのブラウザーには適しているはずです: http://caniuse.com/#feat=text-overflow

于 2013-05-14T18:58:16.020 に答える
0

これはあなたにとって合理的な出発点ですか？

フィドル: http://jsfiddle.net/QkugN/

基本的に、すべてのコンテンツを に追加しdiv、 の通常の方法を使用して非表示にしoverflow:hiddenます。また、ホバー時に残りのコンテンツを表示するタブを追加します。マウスオーバー状態に絶対配置を使用すると、コンテンツは一時的にフローから削除され、周囲のコンテンツをオーバーレイできるようになります。このままでは完全な解決策ではないかもしれませんが、探求できる純粋な CSS の方向性です。

ビジネスを行っているビットは、General Sibling セレクター "~" (チルダ) です。それに対するサポートは、最新のブラウザーではかなりしっかりしています。

于 2013-05-14T19:38:00.897 に答える
0

JavaScript を使用すると、substring. jQuery は必須ではありませんが、あると少し簡単になります。

var myText = $('.myBox').text(), 
maxLength = 250, 
more = '...';

if (myText.length > maxLength) {
    myText = myText.substring(0, 250);

    $('.myBox p').text(myText + more);
}

私の例を参照してください: http://jsfiddle.net/clrux/6Fk7B/14/

于 2013-05-14T19:00:35.130 に答える