2013年11月 | ぼくのgeekなひとりごと・・・

文字列を一定の長さで省略表示（...）する

2013年11月05日 14時05分

新着情報にあるような、日付とタイトルを一覧したりするときタイトル部分が２行にならないようにCMS側でフィルターかけたり、Feedを読み込んでJavaScriptで文字列を切り取ったり・・・

なんとなく無駄だなぁ〜って思ってた。

スタイルシートだけで出来ちゃうんですね！！

li{
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

２行目：<LI>タグの幅を300ピクセルに設定

３行目：空白文字の扱いを定義するプロパティ white-space に nowrap を指定し、改行を半角スペースとして表示させる。

４行目：要素からはみ出したコンテンツに対する指定をするプロパティ overflow に hidden を指定し、はみ出し部分を表示させない。

５行目：はみ出し領域の表示方法を指定するプロパティ text-overflow に ellipsis を指定し、はみ出した際に末尾に「…」が付加させる。

ただし、<LI>タグなどに適用する場合、list-style-position を outside にしてもリストのスタイルは表示されませんので要注意です。

実際にやってみると

2013年11月05日【メモ】文字列を一定の長さで省略表示（...）する

スタイルシートを覚えるなら

CSS3 スタンダード・デザインガイド【改訂第2版】 (Web Designing Books)

新品価格
￥3,024から
(2013/11/5 14:23時点)

【メモ】jQueryのセレクタ

2013年11月03日 12時30分

■基本

$('*')

すべての要素にマッチします。

$('*').css( 'color', 'red' );

$('element')

すべての element 要素にマッチします。下記の例ではすべての<P>要素にマッチします。

$('p').css( 'color', 'red' );

$('.class')

class="class-name" が指定されたすべての要素にマッチします。

$('.class-name').css( 'color', 'red' );

$('#id')

id="id-name" が指定された要素にマッチします。

$('#id-name').css( 'color', 'red' );

$('selector1,selector2,selector3')

selector1 または selector2 または selectorN にマッチする要素の集合です。

$('p,.class-name,#id-name').css( 'color', 'red' );

■階層

$('selector selector2')

selector1 の子孫要素として出現する selector2 にマッチします。

$('p strong').css( 'color', 'red' );

$('selector > selector2')

selector1 の子要素として出現する selector2 にマッチします。

$('p > strong').css( 'color', 'red' );

$('selector + selector2')

selector1 の直後に兄弟要素として出現する selector2 にマッチします。

$('p + strong').css( 'color', 'red' );

$('selector ~ selector2')

selector1 の後に兄弟要素として出現する selector2 にマッチします。

$('p ~ strong').css( 'color', 'red' );

■属性

$('[name]')

name 属性を持つ要素にマッチします。

$('[href]').css( 'color', 'red' );
$('a[href]').css( 'color', 'red' );

$('[name=value]')

name 属性の値が value に等しい要素にマッチします。

$('[href=http://uppeal.com/]').css( 'color', 'red' );

$('[name!=value]')

name 属性の値が value に等しくない要素にマッチします。

$('[href!=http://uppeal.com/]').css( 'color', 'red' );

$('[name~=value]')

name 属性の値がスペースで区切られたひとつ以上の値を持つ場合、その値のひとつが value と等しい要素にマッチします。

$('[class~=bold]').css( 'color', 'red' );

$('[name|=value]')

name 属性の値がプレフィクスとして value または value- を含む要素にマッチします。

$('[class|=lang]').css( 'color', 'red' );

$('[name^=value]')

name 属性の値が value を先頭に含む要素にマッチします。

$('[class^=lang-]').css( 'color', 'red' );

$('[name$=value]')

name 属性の値が value を末尾に含む要素にマッチします。

$('img[src$=.png]').css( 'margin', '10px' );

$('[name*=value]')

name 属性の値が value を含む要素にマッチします。

$('img[src*=uppeal.com]').css( 'margin', '10px' );

$('[condition1][condition2]')

condition1 、condition2 両方を満たす要素にマッチします。

$('img[class=button],img[src*=uppeal.com]').css( 'margin', '10px' );

■フィルター

:even
:odd

対象要素の中で偶数番目／奇数番目の要素にマッチします。

$('p:even').css( 'color', 'red' );
$('p:odd').css( 'color', 'blue' );

:first
:last

対象要素の中で最初／最後の要素にマッチします。

$('p:first').css( 'color', 'red' );
$('p:last').css( 'color', 'blue' );

:eq(index)
:eq(-index)

対象要素の中で０から数えて index 番目の要素にマッチします。負の値を指定した場合は後ろから数えます。

$('p:eq(10)').css( 'color', 'red' );
$('p:eq(-1)').css( 'color', 'blue' );

:gt
:lt

対象要素の中で０番目から数えて index 番目より大きい／小さい要素にマッチします。

$('p:gt(1)').css( 'color', 'red' );
$('p:lt(1)').css( 'color', 'blue' );

:not(selector)

対象要素の中で selector にマッチしない要素にマッチします。

$('p:not(excerpt)').css( 'color', 'red' );

:focus

対象要素の中でフォーカスが当たっている要素にマッチします。

$('input:focus').css( 'color', 'red' );

:header

対象要素の中でフォーカスが当たっている要素にマッチします。

$(':header').css( 'font-size', '20px' );

:lang(language)

対象要素の中で、lang="language" の要素にマッチします。

$(':lang(en)').css( 'font-family', 'Arial' );

:target(language)

対象要素の中で、URIのターゲット(#target) をidとして持つ要素にマッチします。例えば、http://www.example.com/sample.html#HTML にアクセスされた場合、id="HTML"属性を持つ要素にマッチします。

$(':target').css( 'color', 'red' );

:animated

アニメーション実行中の要素にマッチします。

$('p:animated').css( 'color', 'red' );

:contains(text)

text をテキストとして含む要素にマッチします。

$('p:contains(geek)').css( 'color', 'red' );

:empty

空の要素にマッチします。

$('p:empty').css( 'min-height', '20px' );

:has(selector)

対象要素の中で、selector にマッチする要素を子孫要素として持つ要素にマッチします。

$('p:has(strong)').css( 'color', 'red' );

:parent

対象要素の親要素にマッチします。

$('strong:parent').css( 'color', 'red' );

:hidden

非表示要素にマッチします。非表示要素には、head, title, meta, script, style などの非表示要素、CSS で display: none が設定された要素、width:0; height:0 が設定された要素、type="hidden" の input要素、祖先要素が非表示状態の要素が含まれます。

使い道がわかんない・・・

:visible

表示されている要素にマッチします。表示要素には html, body要素も含まれます。

使い道がわかんない・・・

:first-child
:last-child

対象要素の内、その要素が親要素から見て最初／最後の子要素であるものにマッチします。

$('p:first-child').css( 'color', 'red' );
$('p:last-child').css( 'color', 'blue' );

:first-type-of
:last-type-of

対象要素の内、その要素が親要素から見て同じ種別の最初／最後の子要素であるものにマッチします。

$('p:first-type-of').css( 'color', 'red' );
$('p:last-type-of').css( 'color', 'blue' );

:nth-child(index)
:nth-last-child(index)

対象要素の内、その要素の親要素から見て index 番目の子要素であるものにマッチします。最初の要素が１番目になります。:nth-last-child() は後ろから数えます。

$('li:nth-child(3)').css( 'color', 'red' );
$('li:nth-last-child(3)').css( 'color', 'blue' );

index は、２の倍数 (2n) や、２の倍数に１を加えたもの( 2n + 1 )などを指定することができます。

$('li:nth-child(2n)').css( 'color', 'red' );
$('li:nth-child(2n+1)').css( 'color', 'blue' );

:nth-of-type(index)
:nth-last-of-type(index)

:nth-child() 、:nth-last-child() と同様ですが、同じ種別の要素のみを数えます。

$('li:nth-type-of(3)').css( 'color', 'red' );
$('li:nth-last-type-of(3)').css( 'color', 'blue' );

:only-child

その要素が、親要素から見て唯一の子要素である場合にマッチします。

$('li:only-child').css( 'color', 'red' );

:only-type-of

その要素が、親要素から見て唯一の子要素である場合にマッチします。

$('li:only-type-of').css( 'color', 'red' );

■フォーム

:input

input、textarea、select、button要素にマッチします。

$(':input').css( 'color', 'red' );

:text
:password
:file
:checkbox
:radio
:submit
:reset
:button
:image

type="text" , type="password" 等の input要素にマッチします。

$('input:text').css( 'color', 'red' );

:checked

checked な状態の要素にマッチします。

:selected

selected な状態の要素にマッチします。

:disabled

disabled な状態の要素にマッチします。

$('input:disabled').css( 'color', 'gray' );

:enabled

enabled な状態の要素にマッチします。

$('input:enabled').css( 'color', 'red' );

jQueryを覚えるなら

Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)

新品価格
￥3,129から
(2013/11/3 13:37時点)