質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

18545閲覧

tableのセルの文字数を制限する

tarofess

総合スコア127

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/01/04 09:45

現在tableのセルにあるだけの文字が全部表示されるようになっており、文字数を制限して終わりの文字を...で表示させたいのですが、どうすればいいでしょうか?
下記コードのidがcontentのtdの文字数を制限したいとすれば、どのようにコードを書けばいいでしょうか?

html

1<table> 2 <tr> 3 <td><td/> 4 <td id="content"><td/> 5 </tr> 6</table>

text-overflowを指定してもうまくいきませんでした。
どなたか分かる方がいれば教えていただきたいです。よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

テーブルだと height やら overflow やらが効かないので、テーブルのセルの中にブロック要素を入れてそこに oveflow および text-overflow を指定すれば HTMLだけで自動的にはみ出た部分が "…" で省略されます。

html

1<!DOCTYPE html> 2<html> 3<head> 4<style> 5#content { 6 width: 100%; 7 table-layout: fixed; 8} 9.tdata { 10 height: 100%; 11 overflow: hidden; 12 white-space: nowrap; 13 text-overflow: ellipsis; 14} 15</style> 16</head> 17<body> 18<table id="content"> 19<tr> 20 <td><p class="tdata">現在tableのセルにあるだけの文字が全部表示されるようになっており</p></td> 21 <td><p class="tdata">現在tableのセルにあるだけの文字が全部表示されるようになっており</p></td> 22 <td><p class="tdata">現在tableのセルにあるだけの文字が全部表示されるようになっており</p></td> 23 <td><p class="tdata">現在tableのセルにあるだけの文字が全部表示されるようになっており</p></td> 24</tr> 25</table> 26</body> 27</html>

あとは、JavaScript を使ってウェブブラウザ側で省略させる方法もできると思います。「jQuery 文字 省略」のようなキーワードで検索してみて下さい。

投稿2018/01/04 10:32

編集2018/01/04 10:34
miyahan

総合スコア3095

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tarofess

2018/01/05 01:49

ご回答ありがとうございます。p要素で囲むとうまくいきました。そのままtdにtext-overflowを指定するだけではダメなのですね。ありがとうございました。
guest

0

javascriptで置き換えてクリックをトリガーに表示するなどの処理が妥当です。
特に文字数はwidthなどで拾えないので幅を調整するのは無理があると思います

たとえばこう

javascript

1$(function(){ 2 var len=5; 3 $('.content').filter(function(){return $(this).text().length>len;}).each(function(){ 4 $(this).data("text",$(this).text()); 5 $(this).text($(this).text().substr(0,len)+".."); 6 }).on('click',function(){ 7 var dataText=$(this).data("text"); 8 $(this).data("text",$(this).text()); 9 $(this).text(dataText); 10 }); 11});

HTML

1<table> 2<tr> 3<td>hogehoge<td/> 4<td class="content">fugafuga<td/> 5</tr> 6<tr> 7<td class="content">hogehoge<td/> 8<td>fugafuga<td/> 9</tr> 10<tr> 11<td>hoge<td/> 12<td class="content">fuga<td/> 13</tr> 14</table>

投稿2018/01/04 10:48

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tarofess

2018/01/05 01:50

ご回答ありがとうございます。javascriptでこういう書き方もできるのですね。参考にさせていただきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問