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

質問

いつもお世話になっております。
JavaScriptで行えるかどうかわかりませんが、
こちらで質問させていただきます。

今回ご質問したい内容が、
「htmlのタグ（h1,tdなど）で囲まれた要素（文字）が、
　こちらで指定する規定文字数を超えた場合、
　越えた箇所以降を"...""(続)"などの形で省略する方法」です。

ある一定数で「打ち切る（見えなくする）」という形ですと、
運用上問題が起きてしまうため、動的に「省略」させてくれる
方法をご存知の方がいらっしゃいましたら、お手数ですが
ご教授いただけないでしょうか。

よろしくお願いいたします。

回答No.2

yambejp · ベストアンサー

仮にtdの中身を省略するとして

<style>
.hide{
display:none;
}
.ryaku{
color:red;
}
</style>
としておいて、tdがこんな感じだったとき
<td>ABCDE<a href="#">FGHIJ</a>KLMNO</td>

３文字で残りを隠すとなると
<td>ABC<span class="hide">DE<a href="#">FGHIJ</a>KLMNO</span><span class="ryaku">...</span></td>

７文字で残りを隠すとなると
<td>ABCDE<a href="#">FG<span class="hide">HIJ</span></a><span class="hide">KLMNO</span><span class="ryaku">...</span></td>

１２文字で残りを隠すとなると
<td>ABCDE<a href="#">FGHIJ</a>KL<span class="hide">MNO</span><span class="ryaku">...</span></td>

などになるのでしょうか？
ようはタグをまたいだ場合の例外処理がどうなるか、そもそも
タグをまたぐ可能性はあるのか？という仕様をまず決め込むことです。

そうすれば表示の仕方がきまるのでそれに基づいたフローを
書けばよいでしょう。
省略したものを表示する必要がある場合などはさらに複雑に
なるので、かなり面倒なことに思えますけどね・・・

お礼

お返事遅くなりまして申し訳ございません。

おかげさまで、無事完成させることができました。

省略したものの表示には、オンカーソルで文字が浮き出すような形で
Javascriptで対応しました。

わざわざありがとうございましたm'_ _)m

回答No.1

yambejp

命題が不明確。

＞htmlのタグ（h1,tdなど）

たとえば特定のclassを指定した<p>に対して処理をする・・・
などであれば比較的簡単にいけそうですが、どのタグか不定で
idやclassについてもなにも触れられていないので、難しいです。

見えなくするだけであれば、<span>タグを挿入して、その部分を
隠してしまうようなやり方でしょうか？
ただ一定の文字数といいつつ、そのタグのなかにテキストノード
以外のもの、たとえばタグとかエスケープ文字とかはいっていると
文字カウントが正しくできませんので、結構めんどうな処理に
なりそうです。

まずは方針をきめて、仕様をきめて、例外がないかを判断して
処理をかく・・・という手順になりそうです

お礼

ありがとうございます。

曖昧な書き方で申し訳ございませんでした。
現在やりたいと考えている方向ですが、

<td class="head1"><a href="../--.html"> 関数で取得してきたテキストの題名</a> </td>

上のような形で、処理をループさせて見出しを複数作成します。
この見出し（関数で取得する～…）の部分をカウントし、
各々の見出しを対象に動作させたいと考えております。

関数の結果（に出てくる題名）に対してカウント実行を行えればベストなのですが…。

よろしければ、またご教授いただけますと幸いです。