Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                

タグ

truncateに関するopparaのブックマーク (5)

  • 指定した幅からはみ出たテキストを...にする

    ブログを更新してるって事はわりと仕事が落ち着いている時! 良いのか悪いのかは分かりません。 して、さすがに、前のネタはビミョー過ぎたかな!とか思いつつも今回も特に珍しいネタではないですが、メモがてら。 随分昔に、似たような記事を書いてますが、あっちは使い勝手が悪いので、今回はちゃんと使えそうな方法です。 使いドコロとしては、パンくずリストとかスマホ対応の記事一覧とかでしょうか。 サンプルは下記よりご覧ください。 重要になってくるのは、以下の3つのプロパティです。 ul li { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } どれか一つでも無いとダメなので、セットで書くようにしませう。 わりとIE6でも...にはならないけど、切ることは出来たりと対象ブラウザも広いです。 パンくずリストで使う場合は、2行にな

    指定した幅からはみ出たテキストを...にする
  • テキストの末尾処理はお任せ·trunk8 MOONGIFT

    trunk8は文字列の末尾処理を行うjQueryライブラリです。 Webサイトを作る際には長過ぎる文字に対して適当なところで区切る処理がよく行われます。サーバサイドで行う手もありますが、今回はtrunk8というクライアントサイドの文字切りライブラリを紹介します。 ベーシックな使い方。単にtrunk8を呼び出すだけ。 複数行も問題なし。 増やせば自動的に調整されます。 末尾文字は自由に決められます。 内容を更新すればそれに合わせて変化します。 YouTube風のトグルもできます。 画面幅に合わせて自動リサイズも可能です。 trunk8はクライアントサイドなのでより柔軟な文字のカットが行えます。面白いのは文字数ではなく該当DOMの幅に合わせて変化する点でしょう。複数行対応、区切った場合の最後の文字を変更したり、文字をアップデートしてもちゃんと表示が保てます。YouTube風にもっと読む(少なく

    テキストの末尾処理はお任せ·trunk8 MOONGIFT
  • http://jrvis.com/trunk8/

    http://jrvis.com/trunk8/
  • Truncating text using only CSS - amix.dk

    Here's how you can truncate text using only CSS. It works in IE 7+, Safari 4+, Firefox 7+ and Chrome 10+: .link_truncated { display: inline-block; width: 275px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; vertical-align: top; } How it looks like when rendered:

  • Cutter.js Truncate HTML

    Cutter.run( oApplyTo, oTarget, nWords, oTexts, oClasses ) Executes the cutter on oApplyTo and put the content cut in oTarget. Params: oApplyTo : DOM element to cut the content. oTarget : DOM element where put the content after cut. nWords : Number of words to cut on the oApplyTo element. oTexts : Config object for the text in the link, to show the full content again, if it's needed. oTexts by defa

  • 1