10

テキストの段落を切り詰めようとしていて、後に省略記号を追加して、さらにコンテンツがあることを示しています。

CSS プロパティを使用しようとしましたがtext-overflow:ellipsis、この例を見ると、 を使用した場合にのみ可能であり、no-wrap1 行のテキストでしか使用できないため、段落の切り詰めには適していません。

その後、別の解決策を思いつきました。これはほぼ正しいですが、問題が 1 つだけあります...

ellipsisしたがって、プロパティを使用して切り捨てる代わりにoverflow:hidden、max-height

.tourItem .tourInfo
{
max-height: 110px;
overflow: hidden;
display: block;
}

そして、私が使用したきちんとした省略記号を作成するために:after

.tourItem .tourInfo:after {content:'...';}

これは正しい方法のようですが、2つの問題に遭遇しました...

  1. コンテンツが表示されないoverflow:hiddenことを意味します。:afterただし、切り捨てられたテキストを制御するものであるため、必須です。
  2. 省略記号 ( を削除した場合overflow:hidden) は、テキストのセクションの下に表示されます。テキスト行の一部であるように見せる必要があります...

JS Fiddle が役立ちます

4

6 に答える 6

3

CSS のみを使用して段落に省略記号が追加されているJSFiddle Linkを確認してください。要件/ニーズに応じて背景をカスタマイズできます。

コードは次のとおりです。

.tourItem {
  position: relative;
  font-family: sans-serif;
  display: block;
  width: 244px;
  height: 7em;
  overflow: hidden;
}

.tourItem .tourInfo {
  color: #333;
  padding: 20px;
  width: 204px;
  overflow: hidden;
  background: #E0E0E0;
  font-size: .95em;
  line-height: 1;
  text-align: justify;
}

.tourItem .tourInfo:after {
  content: ' ';
  position: absolute;
  display: block;
  width: 100%;
  height: 1em;
  bottom: 0px;
  left: 0px;
  background: #E0E0E0;
}

.tourItem .tourInfo:before {
  content: '...';
  text-align: right;
  position: absolute;
  display: block;
  width: 2em;
  height: 1em;
  bottom: 1em;
  right: 20px;
  background: -moz-linear-gradient(left, rgba(224, 224, 224, 0) 0%, rgba(224, 224, 224, 1) 38%, rgba(224, 224, 224, 1) 99%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(224, 224, 224, 0)), color-stop(38%, rgba(224, 224, 224, 1)), color-stop(99%, rgba(224, 224, 224, 1)));
  background: -webkit-linear-gradient(left, rgba(224, 224, 224, 0) 0%, rgba(224, 224, 224, 1) 38%, rgba(224, 224, 224, 1) 99%);
  background: -o-linear-gradient(left, rgba(224, 224, 224, 0) 0%, rgba(224, 224, 224, 1) 38%, rgba(224, 224, 224, 1) 99%);
  background: -ms-linear-gradient(left, rgba(224, 224, 224, 0) 0%, rgba(224, 224, 224, 1) 38%, rgba(224, 224, 224, 1) 99%);
  background: linear-gradient(to right, rgba(224, 224, 224, 0) 0%, rgba(224, 224, 224, 1) 38%, rgba(224, 224, 224, 1) 99%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00e0e0e0', endColorstr='#e0e0e0', GradientType=1);
}
<div class="tourItem ">
  <div class="tourInfo">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

于 2014-12-10T04:46:39.640 に答える
0

HTMLコンテナ内のテキストを切り捨てるためのjqueryプラグインを作成しました：

https://github.com/AlirezaAsadi/truncatie

Truncatie は、HTML コンテナー内の行ごとにテキストのサイズを制限する jquery プラグインです。

使用法x

  $('big-text').truncatie({
       elipsis: '...',
       max: 2 /* Number of lines limitation */
   });

# 入力

 Truncatie is a jquery plugin
 that limit size of text by 
 lines within a html container

# 出力

 Truncatie is a jquery plugin
 that limit size of text by..
于 2015-11-06T03:39:54.837 に答える
-1

このようなものを作ろうとしたことがありますか？

<div class="content-ovh">
   <p class="text">Your text</p>
   <a href="#">More</a>
</div>

そしてスタイル：

.content-ovh .text{
    witdh: yoursize px;
    height: yoursize px;
    overflow:hidden;
}
于 2013-07-18T10:08:21.763 に答える