30

適用する必要なくCSSの省略記号効果を達成するための賢い方法があるかどうか疑問に思っていましたwhite-space: nowrap。

言い換えれば、特定の高さのブロック要素があり、それをテキストコンテンツで埋めたいとしますが、水平方向と垂直方向にスペースがなくなるとすぐに省略記号を適用する必要があります。 .

簡単な例: http://jsfiddle.net/fpv9n/2/

テキストはそのままである必要がありますが、最後に省略記号も付けてください。CSSを使用してそれを達成する方法はありますか? JS ソリューションも考慮に入れます。

4

3 に答える 3

27

純粋な CSS を使用してこれを行う方法はありません。それは巨大で悲しいです。コンテナからこぼれるたびにテキストがオーバーフローする可能性がある複数行のテキストをブラウザに「楕円化」させたい場合、私はしばしばこれを望んでいました。

于 2013-06-10T16:51:28.673 に答える
16

Update nowdays CSSline-clampは最新のブラウザーで使用できます。

p:first-of-type {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color:#777
}
<h2>Run that snippet to find out if your browser understand this</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
  placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus
  enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
  luctus, metus</p>
  <h3>same text below, not clamped.</h3>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
  placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus
  enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
  luctus, metus</p>
更新を終了する

content:'...' と position:absolute; で省略記号を偽装できます。 数行以内に高さを設定します（最終的に垂直パディングを追加します）
http://jsfiddle.net/V3ZQH/

span {
    background-color: red;
    width: 100px;
    /*height: 50px;*/
    height:2.4em;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    /*white-space: nowrap; */
    position:relative;
    padding:0 0.5em;
}
span:after {
    content:'...';
    background:inherit;
    position:absolute;
    bottom:0;
    right:0;
    box-shadow:0 0 5px red
}
于 2013-06-10T16:54:02.357 に答える
1

content、絶対配置、ドットとパディングを保持するヘルパー要素を含む醜い回避策しか知りません。たとえば、次のようにして、高さを行の高さの正確な数にするのがおそらく最善だと思います。

height: 2em;
font-size: 1em;
line-height: 1em;
于 2013-06-10T16:56:45.260 に答える