0

データベースからテキストが読み込まれるレスポンシブ Web ページがあります。

<p style="width: 95%; font-size:13px; padding-right:20px; color:#babec5; margin-top: 3px;">
Just 7 days left ... Bob, Father's Day is only one week away, s...</p>

「...」の後にさらにテキストがあります。<p>p 要素には垂直に 2 行あります。ページのサイズが変更された場合でもコンテンツを切り取ることができるようにしたいと考えています。

4

3 に答える 3

2

css を使用できoverflow: hidden;ます。これにより、テキストが切り取られます。

末尾に 3 つのドットが必要な場合は、それをtext-overflow: ellipsis;サポートするほとんどの最新のブラウザーを使用することもできます。

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow?redirectlocale=en-US&redirectslug=CSS%2Ftext-overflow

ただし、機能させるには、固定の高さまたは最大高さが必要です

于 2013-06-10T16:46:28.460 に答える
0

私はただ設定したい

オーバーフローを含めるスタイル:hidden

例えば

p
{
  width: 95%;
  height: 20px;
  overflow: hidden;
}

ここにjsfiddleがあるので、効果を確認できます（右下のパネルのサイズを変更して、実際に動作していることを確認してください）

http://jsfiddle.net/mdXCH/

于 2013-06-10T16:46:51.450 に答える
0

この種の CSS ルールをお探しですか: http://www.w3.org/TR/2002/WD-css3-text-20021024/#text-overflow-props

于 2013-06-10T16:47:15.473 に答える