人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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,その他邪道な方法でも構いません。

●質問者: neuromancer_sho
●カテゴリ:ウェブ制作
✍キーワード:CSS HTML JavaScript セル タグ
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● kn1967
●15ポイント

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>
◎質問者からの返答

なるほど。

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

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


2 ● Nori327
●15ポイント

スタイルシートで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>
◎質問者からの返答

同じw

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

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


3 ● 牛乳先生(tukihatu)
●15ポイント

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

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

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

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

です。

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

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

対処法は二つ+一つ

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

・手動で改行する。

あと無理やりな方法で

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

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

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

◎質問者からの返答

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

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


4 ● susie-t
●45ポイント ベストアンサー

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

邪道かもしれませんが、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>

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

◎質問者からの返答

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が使えない・・・・

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ