1

次のhtml要素があります。

<h2>Download "<div id="title"></div>" for...</h2>

内部にjqueryを含むタイトルを挿入したいのですが、次の<div id="title"></div>ようになります。

「タイトルがすっごい長い長い…」をダウンロードして…

このcss/lessで：

#title{
   overflow: hidden;
   text-overflow:ellipsis;
}

しかし、それはこのように見えます:

ダウンロード」

タイトルがすっごい長い…

" 為に ...

タイトルが分割された 1 行のテキストが表示されるはずですが、代わりに 3 行のテキストが表示されます。テキスト全体を 1 行に配置するにはどうすればよいですか? ありがとう！

4

3 に答える 3

2

正しい方法はspan、要素を使用し、に設定することですinline-block

http://jsbin.com/imutem/4/edit

#title{
   display:inline-block;
   vertical-align:bottom;
   overflow: hidden;
   width:200px;
   white-space: nowrap;
   text-overflow:ellipsis;
}

HTML:

<h2>Download "<span id="title"></span>" for...</h2>
于 2013-08-16T07:56:59.430 に答える
2

1 行の場合に whichを使用しているため、実際にtext-overflow: ellipsis;使用する必要はありません。また、ブロック レベルの要素であるため、要素に固定幅を使用して割り当てる必要があります。for...sentence...for...divdisplay: inline-block;

デモ(私はそれに取り組んでいましたが、以下のコメントのおかげで..)

#title{
    overflow: hidden;
    text-overflow:ellipsis;
    display: inline-block;
    width: 100px;
    white-space: nowrap;
    vertical-align: bottom; /* This is important to align text right in the line */
}

また、あなたが使用していることを指摘したいと思いますid.idは一意である必要があるため、繰り返さないようにして、代わりにクラスを使用することをお勧めします。また、これらの目的のためにspan、より良い要素になります..

于 2013-08-16T07:54:44.527 に答える