htmlで<td>タグ内の折り返し位置を強制したいです。


<table><tr>
<td style="width:10ex">aaaaa aaaaaa aaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaa aaaaaa</td>
<td style="width:10ex">aaaaa_aaaaaa_aaaaaaaa_aaaaaaaaa_aaaaaaaaa_aaaaaaaa_aaaaaa</td>
<td style="width:10ex">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
</tr></table>

となっている時、3つのセルともぴったり10ex幅にする事は出来ませんか?
css,javascript,その他邪道な方法でも構いません。

回答の条件
  • 1人5回まで
  • 登録:2008/07/15 17:13:12
  • 終了:2008/07/20 16:29:45

ベストアンサー

id:susie-t No.4

susie-t回答回数99ベストアンサー獲得回数182008/07/16 00:32:16

ポイント45pt

この問題は厄介ですよね・・・。

邪道かもしれませんが、JavaScript + CSSでの方法。TDタグ内でタグを使わないという制限つきです。(使うとタグがそのまま表示されます。)

WinXp + IE6、Firefox2、Opera9で確認。

各文字の間に0幅の空白DIVを挟んでいるので、画面からコピーしてエディタに貼り付けると改行と空白だらけになります。

<html>
<head>
<style>
div.sep{
  float:left;
  margin:0px;
  width:0px;
}
</style>
<script>
window.onload = function(){
  var tds = document.getElementsByTagName("td");
  for(var i = 0; i < tds.length; i++){
    var td = tds[i];
    var str = "";
    var chars = td.innerHTML.split("");
    for(var j = 0; j < chars.length; j++){
      var char = chars[j];
      str += char + "<div class='sep'>&nbsp;</div>";
    }
    td.innerHTML = str;
  }
};
</script>
</head>
<body>
<table><tr>
<td style="width:10ex">aaaaa aaaaaa aaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaa aaaaaa</td>
<td style="width:10ex">aaaaa_aaaaaa_aaaaaaaa_aaaaaaaaa_aaaaaaaaa_aaaaaaaa_aaaaaa</td>
<td style="width:10ex">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
</tr></table>
</body>
</html>

参考になれば幸いですが。。。

id:neuromancer_sho

0幅のdivというアイディアは面白いですね。

width = td.style.posWidth;

currentpos=0;str="";

while(currentpos<td.innerText.length){</p>

str = str + td.innerText.substr(currentpos,width) + "\<br\>";

currentpos = currentpos + width;

alert(currentpos);

}

みたいな事も考えてました。

質問者欄には何故かpreが使えない・・・・

2008/07/16 12:58:02

その他の回答(3件)

id:kn1967 No.1

kn1967回答回数2915ベストアンサー獲得回数3012008/07/15 17:27:13

ポイント15pt

IE限定になってしまいますが・・・。

<table><tr>
<td style="width:10ex;word-break:break-all">aaaaa aaaaaa aaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaa aaaaaa</td>
<td style="width:10ex;word-break:break-all">aaaaa_aaaaaa_aaaaaaaa_aaaaaaaaa_aaaaaaaaa_aaaaaaaa_aaaaaa</td>
<td style="width:10ex;word-break:break-all">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
</tr></table>
id:neuromancer_sho

なるほど。

でもIE限定はキツイですね。

最近operaとかfirefox流行ってますし・・・

2008/07/15 18:22:22
id:Nori327 No.2

Nori327回答回数65ベストアンサー獲得回数32008/07/15 18:10:22

ポイント15pt

スタイルシートでword-breakを指定すると可能のようです。

IE7とSafariで確認しました。


http://www.htmq.com/style/word-break.shtml

<table>
<tr>
<td style="width: 10ex; word-break: break-all">aaaaa aaaaaa aaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaa aaaaaa</td>
<td style="width: 10ex; word-break: break-all">aaaaa_aaaaaa_aaaaaaaa_aaaaaaaaa_aaaaaaaaa_aaaaaaaa_aaaaaa</td>
<td style="width: 10ex; word-break: break-all">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
</tr>
</table>
id:neuromancer_sho

同じw

safariでも可能なんですね・・・

あ、これって標準化対象の機能みたいですね。標準化を待つというのも手かもしれません・・・

2008/07/16 12:12:59
id:tukihatu No.3

牛乳先生(tukihatu)回答回数180ベストアンサー獲得回数322008/07/15 18:39:37

ポイント15pt

残念ながら仕様的に不可能です。

出来ても上のようにIEとsafariのみです。

広がってしまう原因を一応。知っているかも知れませんが。

”半角英数字の連続は、英語の単語として扱われるため、通常のブラウザ指定では折り返さない仕様”

です。

まあつまり、aaaaaaaという英文字は単語として判断されるため、自動で折りかえりません。

URLなどが代表的な例ですね。

対処法は二つ+一つ

・aaa aaaとする。(半角スペースを入れると、単語の区切りとみなされ折りかえります)

・手動で改行する。

あと無理やりな方法で

・jquery.jsあたりをつかって、webページを開く直前に文字長さ判定→長すぎたらbrを入れる→出力

ただ、この無理やりなことをやると大変なので、お勧めはしません。

通常の常識では、これは仕様なので不可能です!といって通ると思うので、個人的には対応しなくても良いのではないかと…

id:neuromancer_sho

個人的にやりたいものでw。

javascriptの文字列処理で\<td\>内を書き換える(brを入れる)のは自分のスキルで出来ますが、それは最終手段と考えています。

2008/07/16 11:53:56
id:susie-t No.4

susie-t回答回数99ベストアンサー獲得回数182008/07/16 00:32:16ここでベストアンサー

ポイント45pt

この問題は厄介ですよね・・・。

邪道かもしれませんが、JavaScript + CSSでの方法。TDタグ内でタグを使わないという制限つきです。(使うとタグがそのまま表示されます。)

WinXp + IE6、Firefox2、Opera9で確認。

各文字の間に0幅の空白DIVを挟んでいるので、画面からコピーしてエディタに貼り付けると改行と空白だらけになります。

<html>
<head>
<style>
div.sep{
  float:left;
  margin:0px;
  width:0px;
}
</style>
<script>
window.onload = function(){
  var tds = document.getElementsByTagName("td");
  for(var i = 0; i < tds.length; i++){
    var td = tds[i];
    var str = "";
    var chars = td.innerHTML.split("");
    for(var j = 0; j < chars.length; j++){
      var char = chars[j];
      str += char + "<div class='sep'>&nbsp;</div>";
    }
    td.innerHTML = str;
  }
};
</script>
</head>
<body>
<table><tr>
<td style="width:10ex">aaaaa aaaaaa aaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaa aaaaaa</td>
<td style="width:10ex">aaaaa_aaaaaa_aaaaaaaa_aaaaaaaaa_aaaaaaaaa_aaaaaaaa_aaaaaa</td>
<td style="width:10ex">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
</tr></table>
</body>
</html>

参考になれば幸いですが。。。

id:neuromancer_sho

0幅のdivというアイディアは面白いですね。

width = td.style.posWidth;

currentpos=0;str="";

while(currentpos<td.innerText.length){</p>

str = str + td.innerText.substr(currentpos,width) + "\<br\>";

currentpos = currentpos + width;

alert(currentpos);

}

みたいな事も考えてました。

質問者欄には何故かpreが使えない・・・・

2008/07/16 12:58:02
  • id:tukihatu
    >javascriptの文字列処理で<td>内を書き換える(brを入れる)のは自分のスキルで出来ますが、それは最終手段と考えています。
    といってもこれしか方法がないですよ^^;
    brでも空白文字でも結局はTD内書き換えるしか…

    例えばCGIとかでこの文字を出力するなら、CGIの方で長さ判定してbr入れて吐き出すとか…
    すべてのブラウザでword-breakが使えればいいんですけどねー。
  • id:neuromancer_sho
    >といってもこれしか方法がないですよ^^;
    ですよね・・・・
    他に「目から鱗」な画期的な方法を考えるのも面白いかなと思いまして、質問してみました^^
  • id:kn1967
    Firefoxについては考えなくて良いかも知れませんよ。
    長くては困るって人ならurl_breaker_plusなどのプラグインを入れてるかもしれないし
    まだ試してませんがFirefox3ならプラグイン入れなくても対応してるらしいし・・・。

    ブラウザ側の対応を待つってのも一種の目から鱗では?
  • id:neuromancer_sho
    word-break: が標準化されるのを待ちますかね。

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません