23

私はここSOでこの質問を見つけました、そして解決策は非常に簡単です：

jsfiddle： http: //jsfiddle.net/Y5vpb/

html： 

<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen look</span>​

css：

span{
    display:inline-block;
    width:180px;
    white-space: nowrap;
    overflow:hidden !important;
    text-overflow: ellipsis;
}

そしてそれは期待通りに動作し、それは印刷します：Lorem Ipsum is simply du...

さて、私がやりたいのと同じことですが、失敗し続けて、次の例で作成します。

jsfiddle： http: //jsfiddle.net/9HRQq/

html：

<div class="textContainer">                
    <img src="#" class="image" alt="the_image">
    <span class="text">"The quick brown fox jumps over the lazy dog" is an english-language pangram, that is, a phrase that contains all of the letters of the English alphabet. It has been used to test typewriters and computer keyboards, and in other applications involving all of the letters in the English alphabet. Owing to its brevity and coherence, it has become widely known.</span>
</div>

css：

.textContainer{
    width: 430px;
    float: left;
    margin-top: 10px;
    border: 1px solid black;                
}

.text {
    font-size: 24px;
    line-height: 24px;
    font-weight: bold;
    color: #047F04;
    display: block;
    white-space: normal;
    overflow: hidden !important;
    text-overflow: ellipsis;
    height: 99px;
}

.image {
    float: right;
    position: absolute;
    top: 85px;
    right: 10px;
    width: 108px;
    height: 42px;
}

...私の例で文字列の最後を付けるにはどうすればよいか教えてください。

4

4 に答える 4

20

プロパティの仕様にtext-overflowよると、これは複数行のテキストでは不可能です。

このプロパティは、インラインコンテンツがそのブロックコンテナ要素（「ブロック」）を「可視」以外の「オーバーフロー」を持つインライン進行方向にオーバーフローした場合のレンダリングを指定します。たとえば、折り返しが禁止されている場合（たとえば、「空白：nowrap」が原因で、または1つの単語が長すぎて収まらない場合）、テキストがオーバーフローする可能性があります。

つまり、1行のテキストブロックでのみ機能します。

ソース：http ：//dev.w3.org/csswg/css3-ui/#text-overflow

編集 このフィドルには、jqueryを使用した回避策があります：http：//jsfiddle.net/k5VET/（ソース：クロスブラウザーの複数行のテキストが、幅と高さの固定div内に省略記号が追加されてオーバーフローしますか？）

于 2012-08-03T20:01:35.537 に答える
1 
span{
    display: block; /* Fallback for non-webkit */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* no of lines */
    text-overflow: ellipsis;
    overflow:hidden !important;
    width:180px;
}

CSSプロパティの上に'3つのドットを配置します...
例：


Lorem Ipsumは、印刷および
植字業界の単なるダミーテキストです。Lorem..。

于 2016-12-07T09:48:34.023 に答える
1

これは、jsまたはjqueryなしで可能です。純粋なCSSです。

vijayの答えに似ていますが、追加するには、次のフィールドを追加する必要があります。-webkit-box-orient: vertical;

span {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;  /* limit to 2 lines */
}
于 2022-01-02T15:28:05.983 に答える
0

.textcssブロックに追加width: 200px;します。white-space: nowrap;幅が設定されていない場合、テキストは拡大して塗りつぶされます。

于 2012-08-03T19:55:11.977 に答える