• ベストアンサー

タグに囲まれた文章を、ある一定の文字数に達した場合、自動で省略する方法

いつもお世話になっております。 JavaScriptで行えるかどうかわかりませんが、 こちらで質問させていただきます。 今回ご質問したい内容が、 「htmlのタグ(h1,tdなど)で囲まれた要素(文字)が、  こちらで指定する規定文字数を超えた場合、  越えた箇所以降を"...""(続)"などの形で省略する方法」です。 ある一定数で「打ち切る(見えなくする)」という形ですと、 運用上問題が起きてしまうため、動的に「省略」させてくれる 方法をご存知の方がいらっしゃいましたら、お手数ですが ご教授いただけないでしょうか。 よろしくお願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

仮にtdの中身を省略するとして <style> .hide{ display:none; } .ryaku{ color:red; } </style> としておいて、tdがこんな感じだったとき <td>ABCDE<a href="#">FGHIJ</a>KLMNO</td> 3文字で残りを隠すとなると <td>ABC<span class="hide">DE<a href="#">FGHIJ</a>KLMNO</span><span class="ryaku">...</span></td> 7文字で残りを隠すとなると <td>ABCDE<a href="#">FG<span class="hide">HIJ</span></a><span class="hide">KLMNO</span><span class="ryaku">...</span></td> 12文字で残りを隠すとなると <td>ABCDE<a href="#">FGHIJ</a>KL<span class="hide">MNO</span><span class="ryaku">...</span></td> などになるのでしょうか? ようはタグをまたいだ場合の例外処理がどうなるか、そもそも タグをまたぐ可能性はあるのか?という仕様をまず決め込むことです。 そうすれば表示の仕方がきまるのでそれに基づいたフローを 書けばよいでしょう。 省略したものを表示する必要がある場合などはさらに複雑に なるので、かなり面倒なことに思えますけどね・・・

Pesi
質問者

お礼

お返事遅くなりまして申し訳ございません。 おかげさまで、無事完成させることができました。 省略したものの表示には、オンカーソルで文字が浮き出すような形で Javascriptで対応しました。 わざわざありがとうございましたm'_ _)m

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

命題が不明確。 >htmlのタグ(h1,tdなど) たとえば特定のclassを指定した<p>に対して処理をする・・・ などであれば比較的簡単にいけそうですが、どのタグか不定で idやclassについてもなにも触れられていないので、難しいです。 見えなくするだけであれば、<span>タグを挿入して、その部分を 隠してしまうようなやり方でしょうか? ただ一定の文字数といいつつ、そのタグのなかにテキストノード 以外のもの、たとえばタグとかエスケープ文字とかはいっていると 文字カウントが正しくできませんので、結構めんどうな処理に なりそうです。 まずは方針をきめて、仕様をきめて、例外がないかを判断して 処理をかく・・・という手順になりそうです

Pesi
質問者

お礼

ありがとうございます。 曖昧な書き方で申し訳ございませんでした。 現在やりたいと考えている方向ですが、 <td class="head1"><a href="../--.html"> 関数で取得してきたテキストの題名</a> </td> 上のような形で、処理をループさせて見出しを複数作成します。 この見出し(関数で取得する~…)の部分をカウントし、 各々の見出しを対象に動作させたいと考えております。 関数の結果(に出てくる題名)に対してカウント実行を行えればベストなのですが…。 よろしければ、またご教授いただけますと幸いです。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • 或る文字列の文字数が一定数以上の場合のCSS適用

    はじめまして、html/cssはほぼ理解しているのですが、 Javascriptとなるとサッパリわからず、勉強も進まない者です。 質問です。 当方、或るネットショップを構築中なのですが、 そのサイトの商品詳細ページに於ける、商品名へのCSS適用分けについて困っています。 商品名が一定数以上の文字数になると、枠を飛び出しレイアウトが崩れてしまうのです。 そこで、JavascriptによってCSSを振り分けようと考えました。 一定文字数以上の商品名にはフォントサイズを小さくするCSSを適用させたいです。 各商品ページ毎にhtml/cssを書くのではなく、テンプレートで運用するタイプです。 テンプレのhtml内では商品名は◯◯◯のようになっており、後で代入されるようです。 ◯◯◯の文字数を取得→条件分岐で□文字以上の場合にのみCSSその2を適用。 (未満であればその1) のような処理の流れと思いますが、いまいちそれを書き起せません。 これはどう書けば良いでしょうか? どうか、お知恵をお貸しください。 よろしくお願い致します。

  • XHTML1.0で空要素タグの「/」は省略可能か

    XHTML 1.0で、エンコードがUTF-8であるなど一定の条件を満たせばXML宣言の省略は可能と聞きましたが、 空要素タグの「/」についてはどうでしょうか。 あるサイトで、XHTML 1.0で書かれているはずのページで、空要素タグに「/」が入っていないので (つまり、<br>とか<img src="...">のようになっている) ちょっと気になりました。 ブラウザーでは一応ちゃんと表示されてはいるようですが。

    • ベストアンサー
    • HTML
  • EXCELへ文章をペーストしたら、自動的に一定の文字数する。

    EXCELへ文章をペーストする際、決めておいた一定の文字数だけしかペーストできないようにする方法はありますか? ------------------ 例 ●ペーストする文章 コンピューター関係の質問をする時には、内容に応じて、ご利用のOSやソフトの名前(バージョン)、ハードの機種名やメーカー名などを明記するようにして下さい。 ↓ ↓(ペーストすると) ↓ ↓ ●一定の長さの文章 コンピューター関係の質問をする時には、内容に応じて ------------------

  • タグに挟まれた間の文字を置換する方法

    色々置換方法を勉強していたのですが、特定のタグに挟まれた場合はどのようにしたらよいか分からなかったので質問させて頂きました。 使用するのはテキストエディタです。(秀丸など) 例えばよくあるテーブルタグで <th>あいうえお</th> <td>かきくけこ</td> … … … とある場合に<td>~</td>の間にある文字を置換又は削除する場合はどうしたら良いでしょうか? 例の場合ですと「あいうえお」そのままにして、「かきくけこ」部分を処理したい場合です。 この間にある文字は英数日本語などがあり、文字数もランダムです。 この間を置換または削除出来る…、といいますか<td>~</td>という間にある全てという指定方法を知りたいです。 お詳しい方宜しくお願いします。

  • タグで囲まれた文字を取得する方法

    タグで囲まれた文字列を取る関数とか ないでしょうか。 「この部分」を取りたいのです。  <td>この部分</td>  <font color="#ff0000">この部分</font>  <a href="http://test.com">この部分</a> 同じタグがいくつも有る場合もあるので、 頭から(下から)の検索スタート文字数とか 決められれば最高です。 調べてみたところ下のモジュール?をつかうと <title></title> とかの間はとれるようですが・・・ WWW::Mechanize LWP::UserAgent

    • ベストアンサー
    • Perl
  • 文章を書いているのですが…。HTMLタグについてです。

    こんにちは。 私は、自分のHPで文章を書いています。 <pre>タグを使って書いていると、横にスクロールしないと読めないくらい長くなってしまって、自分で見てて見づらいな~と思っています。 色々、文章の書いてあるHPを回ってみると、ある一定の文字数で改行され、真ん中に文字のある文章を見つけて、自分もこんな風に読みやすくしたい、と思いました。ですが、タグのについて書いてあるHPを見てもどのタグがそれに該当しているのかがイマイチ理解できませんでした。(恐らくdivタグではないかと思っているのですが…) どのタグを使ってどのように指定したらよいのでしょうか? タグについて分かる方、どうか回答をお願いします。

  • ExcelのVBAでHTMLのタグ数を取得するには

    VBAでHTMLソースからタグ指定で情報を取得したいのですが、そのページ内にある特定のタグ数を取得する方法で躓いています。 例えば、下記のURLの"TD"のtagNameから情報を抜き出しているのですが、他のページでは"TD"タグ数が変わってきます。ループ条件で"TD"のタグ数が必要なので、数を取得して変数として代入したいのですが、どうすれば良いでしょうか。ちなみに下のサイトの"TD"の数は71個です。 http://db.netkeiba.com/horse/ped/2010110097/

  • javascriptでテーブルの一定数の列ごとにtrタグが挿入されるようにしたい

    javascriptで、以下のような横長1行のテーブル内の「<td></td>」タグが 3列表示されるごとに「</tr><tr>」を挿入されて改行されるようにしたいのですが、 具体的にどのように組んで行けば良いのか分からず困っています。 よろしければご教授お願いします。 ---------------------- 【ソース】 <table>  <tr>   <td>1</td>   <td>2</td>   <td>3</td>   <td>4</td>   <td>5</td>   <td>6</td>   <td>7</td>   <td>8</td>   <td>9</td>   <td>0</td>  </tr> </table> 【ブラウザでの表示】 |1|2|3|4|5|6|7|8|9|0| ---------------------- このような形に成型されるようにしたいと思っています。 ↓ ---------------------- 【ソース】 <table>  <tr>   <td>1</td>   <td>2</td>   <td>3</td>  </tr>  <tr>   <td>4</td>   <td>5</td>   <td>6</td>  </tr>  <tr>   <td>7</td>   <td>8</td>   <td>9</td>  </tr>  <tr>   <td>0</td>  </tr> </table> 【ブラウザでの表示】 |1|2|3| |4|5|6| |7|8|9| |0| ----------------------

  • Textareaの入力文字数チェックについて(タグ無視)

    TEXTAREAの文字数チェックまではできるのですが しかし、今回はHTMLのタグも入力されます。 タグを無視した文字数もカウントをやりたいです。 PHPにはそのような関数があったような気がしますが ... JavaScriptではどのようにすれば実現できるのでしょうか? タグの文法エラーはない前提でよいです。 よろしくお願いします。 <html> <head> <title>入力文字数のチェック</title> <script language="JavaScript"> function check() { txt = document.form1.sample.value; n = txt.length; if (n > 100) alert("100文字以内にしてください"); } </script> </head> <body> <form name="form1"> <textarea rows="10" name="sample" onChange="check()" cols="20"></textarea> </form> </body> </html>

  • tdなどの閉じタグは省略しても問題ないか

    td, th, tr, liなどの要素に関して、【HTML4.01の仕様としては】省略していいことになっていることは知っています。 Index of the HTML 4 Elements http://www.w3.org/TR/1999/REC-html401-19991224/index/elements.html ただ仕様云々の問題ではなく、現実問題として省略しないほうがいいケースがあるのか気になったので質問させていただきました。 質問は以下です。 ・省略するとレイアウトが崩れるブラウザがあるのでしょうか?あるのならブラウザ名・バージョンを教えてください。 ・省略すると機能的に問題が発生するケースがあるのでしょうか?あるのなら具体的な現象、ブラウザ名・バージョンを教えてください。 ・機能・レイアウト以外に省略しないほうがいい理由があるのでしょうか?あるならその理由を具体的に教えてください。 ・HTML5ではどうなっているのでしょうか?【結構知りたい】 ※XHTMLは書くつもりはないのでこの質問の対象外としていいです よろしくお願いします。

    • ベストアンサー
    • HTML