FlexboxとJavaScriptで、異なる文字数の行の幅を自動で一律にそろえる
Result text-align: justify;が使えれば楽だけどそうもいかないのでJavaScriptで揃える、というのはかなり昔からある方法ですが、最近はflexboxが普通に使えるようになったので、spanで文字を囲ってdisplay:flex;で揃えれられるし、いろいろ応用も効きそうですね 他ライブラリに依存せず、バニラなコードとなっています var lines = document.querySelectorAll(".text-line"); var appendages = document.querySelectorAll(".append"); // 各文字をspan要素で囲う var wrapCharacters = function(lines) { return lines.forEach(function(line) { var characters = l
マウスで選択した文字数を数える
Result マウスドラッグした文字数を数えます。JSはバニラです 使う機会があるかは分かりません jsfunction biR() { document.addEventListener("mousedown", rOS); document.addEventListener("mouseup", rOS); document.addEventListener("onkeyup", rOS); document.addEventListener("onkeydown", rOS); document.addEventListener("onkeydown", rOS); document.onselectionchange = function() { rOS(); }; } function rOS() { var cout, rts, rt; c = window.getSelect
指定した文字数以上になったらそれ以降のテキストを省略する
Result 大量の文字数がありますが、省略されています jQuery$("p").each(function(){ //30文字以上になったら if ($(this).text().length > 30) { //27文字まで表示する、という設定 $(this).text($(this).text().substr(0, 27)); //27文字以降に表示する代替テキスト。「...」とかが一般的？ $(this).append('（以下略'); } });HTML<p>1938年（昭和13年）6月に内務省が「東京都制案要綱<!--ここまで27文字-->」 発表し<!--ここまで30文字。ここ以降に文字がある場合は省略するスクリプトが動作-->、 1943年（昭和18年）1月に政府が「東京都制案」を帝国議会に提出し可決されたことを受け、 同年7月1日に東京都制が施行され、東京府と東京市を
inputやtextareaで、指定した文字数を超えた際に警告文を出す
Result maxlength属性は何かとアレなので文字数自体は制限せずに、予め設定した文字数を超過した際に警告文を出すようにする jQuery/** * Characters limit exceeded warning with a simple jQuery plugin * @copyright Copyright 2013-2015 Joan claret * @license MIT * @author Joan Claret Teruel <dpam23 at gmail dot com> * Licensed under The MIT License (MIT). * Copyright (c) Joan Claret Teruel <dpam23 at gmail dot com> */ ;(function($, document, window, undefine
Shuca - 日本語対応の自動要約
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ブログやソーシャルメディア、バイラルメディアなどここ数年でテキストコンテンツは爆発的に増えています。しかし私たちの時間は1日24時間で変わりません。となると処理しきれない情報ばかり増えてしまいます。 そこでテキストを解析し、そこから大事な部分だけを抽出してくれるような技術に注目が集まります。Shucaは日本語に対応したサマライザーです。 Shucaの使い方 原文です。 実際にはshucaにかける前に分かち書きや日本語の構文解析を行ってくれるJUMANやKNPを実行する必要があります。 そうするとこんな感じでサマライズできます。 100文字などと指定もできます。 150文字で抽出した例。 Shucaは原文の中から重要と思われる部分を抽出し、指定した文字数で結果を返してくれます。今後さ
CSSのtext-overflowではみ出したテキストを「…」表示
CSSのtext-overflowでellipsisを指定すると はみ出したテキストを、javascriptや、jsp、phpなどを使わなくても省略表示できます。 意外とIEでも6から対応しているので、仕事でも心置きなく使えます。 2014/05/10 制作日誌更新！ある日のランチ風景をレポート！ 2014/05/08 movieに予告編ｘｘ版を追加しました 2014/05/05 制作日誌更新！主演のｘｘｘｘさんを直撃！ text-overflowを有効にする4つの条件 text-overflowは、表示領域からテキストがはみ出した場合 末尾に省略記号の「…」を表示するかどうか指定するCSSプロパティです。 そのため、text-overflowが表示領域とはみ出しを認識できるよう 幅指定で「表示領域」をつくって 改行禁止やはみ出し禁止で「はみ出す」概念を準備しないと効果がありません。 幅指
wp_trim_words、文字列を指定した文字数で html タグを除去して取得できる便利な関数がそれ。 – 林家次男
WordPress を使ってちょっと込み入ったことをやりたい、ってときに便利なやつです。 最近よく使うのでメモ。 Codex Codex、ほんと助かります。 wp_trim_words の引数 <?php $trimmed = wp_trim_words( $text, $num_words = 55, $more = null ); ?> ひきすうは3つ。 $text…必須、切り取りたい文字列 $num_words…切り取りたい文字数。デフォルト値は 55文字。 $more…切り取った文字列の後に追加したい文字や html。デフォルトは値 null 配列とかややこしいのは出てこないので使いやすいですね。 注意するのは WordPress 3.3 以上でないとこの関数を実装していないことです。 wp_trim_words を使ってみる 使ってみれば簡単に理解できますきっと。 yahoo.c
jQuery Character Counter Plugin
A jQuery plugin for textarea and text inputs to add a character counter bubble that fades in while you type and fades out when you stop typing. Download Documentation Related Plugins wSelect - Custom select boxes. wInput - Input plugin that handles backwards compatability for placeholders. wCheck - Radio and checkbox input plugin. Demos
Succinct: A tiny jQuery plugin for truncating multiple lines of text
How does it work? Succinct shortens your text to a specified size, and then adds an ellipsis to the end. Demo I notice that you use plain, simple language, short words and brief sentences. That is the way to write English - it is the modern way and the best way. Stick to it; don't let fluff and flowers and verbosity creep in. When you catch an adjective, kill it. No, I don't mean utterly, but kill
Countable.js — Live word-counting in JavaScript
yarn add countable The preferred method of installation is yarn. Alternatively, you can download the script directly. Out of the box, Countable can be used with AMD loaders (require.js), CommonJS loaders (node, browserify) or directly in the browser. Countable offers an easy to understand API. With a single method call you can enable live paragraph-, word- and character-counting on a given HTML el
文章がはみ出したら”…”を表示するtext-overflowの使い勝手が悪いのでjQueryで書いてみたりとか。（CSS おれおれ Advent Calendar 2012 – 08日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 08日目 ネタバレ: 書いてみたは良いけど微妙な感じに。 CSSのプロパティでtext-overflowというのがあります。まあ読んで字の如（ごと）く、テキストがはみ出したときの指定です。以下のいずれかを指定します。 ellipsis … はみ出たら”…” (…) を表示させる clip … 通常処理。 元々IEの独自仕様なんだっけ？ 一般的なブラウザーでは利用可能です。 利用可能なんだけど、利用する場面がどれだけあるのかはちょっとよくわかんないです。 たしかに切ってくれるんだけど ちょいと試してみます。 改行しないようにしたもの (white-space:nowrap) 長い単語を含むもの 領域の高さが足りないもの 最後、領域の高さを超えても省略記号は表示されない ご覧のように、横方向に長いものは”…”で切って
長いテキストを「…」で省略するjQueryプラグイン・Smarttruncation
長いテキストを省略して表示 する、というjQueryプラグイン 、Smarttruncationのご紹介。 CSSのみでも一応は可能ですけど、 こちらはある程度応用が利くの で覚えておこうかと思います。 この手のライブラリはいくつか見かけましたけど、これは日本語でもそのまま利用出来るので一応メモ。 動作サンプル 長いテキストが省略されています。上は語尾を、下は真ん中あたりで省略。なかなか便利なのでは。 CSSのtext-overflow:ellipsis;で制御できない時に試してみてはいかがでしょう。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script> <script src="jquery.smarttruncat
jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法｜BLACKFLAG
Webサイトのトップページで表示するお知らせ情報など、レイアウトの都合上、長い文字列を特定の文字数でカットしたいことはよくあることかと思います。 そんな際にjQueryを使って文字列を任意の文字数でカットして、末尾に「…」などの追記情報（これも任意の文字列）を追加するやり方をシンプルなスクリプトで実装する方法をご紹介してみます。 【テキストのみ】 jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法 まずは実装するHTMLソースが下記のような構成だったとします。 ◆HTML <ul> <li>このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です
WordPressで抜粋の文字数を変更する方法
WordPressで抜粋の文字数を変更する方法を紹介します。WordPressは3.2.1を使っています。 １．問題点 下のスクリーンショットはTwenty Elevenテーマを使った検索結果ページです。検索結果ページではthe_excerpt()を使って（本文の）抜粋を表示するようにしていますが、日本語の場合、the_excerpt()を使っても全文が表示されてしまいます。 理由は、以下の公式ドキュメントによると、「語句の間を半角スペースで区切らない言語では判定できない」ということらしいです。 テンプレートタグ/the excerpt ２．対策 WordPressを使っている方はすでにご存知と思いますが、同梱されている「WP Multibyte Patch」プラグインを有効化します。 これで110文字を抜粋して表示するようになります。 ３．文字数を変更する ２項の設定で110文字になるの
Facebookアプリの入力文字数制限まとめ
Facebookアプリの入力項目に文字数制限があるようなので、まとめて紹介しておきます。スクリーンショットは制限文字数に達したときの証拠です。 １．Facebookについて - 基本情報 アプリケーション名：50文字 説明：250文字 ユーザーサポートのアドレス：無制限 連絡先メールアドレス：100文字 Privacy Policy URL：200文字 サービス規約のURL：200文字 ２．Web Site - Core Settings Site URL：200文字 Site Domain：100文字 ３．Facebook Integration - Canvas キャンバスページ：20文字 Canvas URL：200文字 Secure Canvas URL：200文字 ブックマークURL：200文字 ４．Facebook Integration - Page Tabs タブ名：16文
Plastic Post Style – 記事の抜粋等をカスタマイズ | wembley
美しいタイポグラフィの為のツールとチュートリアル集 12 May 2010 WordPressであったらいいなと思うプラグイン 11 May 2010 WPプラグイン”Link Library”で作る自動リンク集 9 May 2010 WordPressでGoogle AJAX APIからjQueryを読み込む 8 May 2010 これはすごい。究極のソーシャルブックマークアイコン集 6 May 2010 [CSS] 完全固定ヘッダー/フッターの作り方 (IE6対応) 6 May 2010 Japanese 記事の本文と抜粋の出力方法を色々とカスタマイズするプラグイン ::概要:: 『plastic = 柔軟な』 記事の自動整形機能を変更したり、抜粋の表示文字数、許可するタグ、”read more”リンクの文字などを設定できます。 WordPressのデフォルトの設定では改行が自動的
Plugins | jQuery Plugins
Can't find a Plugin you are looking for? Check out the jQuery Wiki page. Are you a plugin developer? Please move your plugin over to this site.
jQuery Plugin: Give Your Characters a NobleCount � The Product Guy
In my quest to always help provide my clients free, cheap and easy to use tools, I have been on the lookout for a jQuery plugin that would provide the ability to: (1) provide non-delayed, real-time character counts, (2) enable easy to customize visual behaviors, and (3) permit event and DOM hooks for the savvy with more advanced character counting needs. While there are other similar tools out the
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サイトにFacebookのいいねボタンとOGPを導入してみる – misc
5509.me