- ベストアンサー
HTMLの禁則処理解除について
- HTMLの禁則処理解除についての質問です。
- 禁則処理により不自然な折り返しが発生しており、解除方法を教えていただきたいです。
- 質問内容のHTMLコードを添付しました。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
単純に!! word-break:keep-all;でよいはずですが？？？ ⇒5.3. Breaking Rules for Letters: the ‘word-break’ property( http://www.w3.org/TR/css3-text/#word-break-property ) 【サンプル】 ★タブは＿に置換してあるので戻す。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;} table,td{width:16em;} div.word-wrap-normal td,div.word-wrap-normal text-area{word-wrap:normal;} div.word-wrap-break-word td,div.word-wrap-break-word{word-wrap:break-word;} div.word-break-normal td,div.word-break-normal{word-break:normal;} div.word-break-keep-all td,div.word-break-keep-all{word-break:keep-all;} div.word-break-break-all td,div.word-break-break-all{word-break:break-all;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>折り返しパターンのテスト</p> ＿</div> ＿<div class="section"> ＿＿<h2>word-wrap</h2> ＿＿<p>折り返しパターンテスト</p> ＿＿<blockquote cite="http://www.w3.org/TR/css3-text/#word-break-property"> ＿＿＿<dl> ＿＿＿＿<dt>normal</dt> ＿＿＿＿<dd>Words break according to their usual rules. ＿＿＿＿<dt>break-all>/dt> ＿＿＿＿<dd>In addition to ‘normal’ soft wrap opportunities, lines may break between any two letters (except where forbidden by the ‘line-break’ property). Hyphenation is not applied. This option is used mostly in a context where the text is predominantly using CJK characters with few non-CJK excerpts and it is desired that the text be better distributed on each line.</dd> ＿＿＿＿<dt>keep-all</dt> ＿＿＿＿<dd>Implicit soft wrap opportunities between letters are suppressed, i.e. breaks are prohibited between pairs of letters (including those explicitly allowed by ‘line-break’) except where opportunities exist due to dictionary-based breaking. Otherwise this option is equivalent to ‘normal’. In this style, sequences of CJK characters do not break. ＿＿＿＿</dd> ＿＿＿</dl> ＿＿＿<address><a href="http://www.w3.org/TR/css3-text/#word-break-property">CSS Text Module Level 3</a></address> ＿＿</blockquote> ＿＿<div class="section word-wrap-normal word-break-normal"> ＿＿＿<h3>word-wrap:normal(デフォルト) & word-break:normal(デフォルト)</h3> <!-- 以下同文 ＿＿＿<form action="./"> ＿＿＿＿<textarea name="MSG" cols=40 rows=4" lang="ja">テスト中です。 サンプルテキスト！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！</textarea> ＿＿＿<table border="1" width="40"> ＿＿＿＿<tbody> ＿＿＿＿＿<tr> ＿＿＿＿＿＿<td width="40"> ＿＿＿＿＿＿＿テスト中です。 サンプルテキスト！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！ ＿＿＿＿＿＿</td> ＿＿＿＿＿</tr> ＿＿＿＿</tbody> ＿＿＿</table> --> ＿＿</div> ＿＿<div class="section word-wrap-normal word-break-keep-all"> ＿＿＿<h3>word-wrap:normal(デフォルト) & word-break:keep-all</h3> <!-- 同文にてコピー --> ＿＿＿</table> ＿＿</div> ＿＿<div class="section word-wrap-normal word-break-break-all"> ＿＿＿<h3>word-wrap:normal(デフォルト) & word-break:break-all</h3> <!-- 同文にてコピー --> ＿＿</div> ＿＿<div class="section word-wrap-normal word-break-normal"> ＿＿＿<h3>word-wrap:break-word & word-break:normal(デフォルト)</h3> <!-- 同文にてコピー --> ＿＿</div> ＿＿<div class="section word-wrap-normal word-break-keep-all"> ＿＿＿<h3>word-wrap:break-word & word-break:keep-all</h3> <!-- 同文にてコピー --> ＿＿</div> ＿＿<div class="section word-wrap-normal word-break-break-all"> ＿＿＿<h3>word-wrap:break-word & word-break:break-all</h3> <!-- 同文にてコピー --> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>
お礼
ご回答ありがとうございます。 テーブルの決まった幅の中で文章が右端まできたら言語に関係なく折り返すようにしたいと考えています。(禁則文字が行頭に来るような文章でも)。IEの禁則処理が働いてしまうようです。
関連するQ&A
- tableがbodyにはみ出る。。
文章での質問で恐縮ですが、 html例に記載のような形で、レイアウトを作っています。 ヘッダーとフッター、左右のBOXとベタな構成かと思ってますが、 右ボックス（div right-box）内のテーブルの行が増えた際（運用上、可変で増えます）に、 tableがdiv構成（wrap-1,wrap-2,right-box,footer）からはみ出して、bodyの領域に出てしまいます。 スタイルシートでは左右のボックスをfloat left、float rightしていて、 テーブルの行が可変なので、left-box以外にはheightは指定していないです。 ※left-boxのheight指定は100% heightを指定しなければ、基本的に行追加に合わせて、可変で動くような気がしているのですが、 どうもうまくいかないです。 left-boxにheightを指定しているのは、left-box内に定義している要素があり、 heightの指定がない場合に、その要素の高さになってしまうので、 right-boxと同じ高さになるように、１00%を指定しています。 分かりにくい質問で申し訳ないですが、 right-boxのheightをtableの行追加に合わせて可変にする方法はないでしょうか？ 本来、heightなしで可変になるのであれば、 可変にならない原因の推測をお願いします。 ---ここからhtml例--- <html> <head> </head> <body> <div id="wrap-1"> <div id="header">; </div> <div class="wrap-2"> <div id="left-box"> </div> <div id="right-box"> <table id="table"> <tr> <td><textarea></textarea></td> </tr> <tr> <td><textarea></textarea></td> </tr> <tr> <td><textarea></textarea></td> </tr> <tr> <td><textarea></textarea></td> </tr> <tr> <td><textarea></textarea></td> </tr> <tr> <td><textarea></textarea></td> </tr> </table> </div> </div> <div class="footer clear"> </body> </div> </div> </body> </html>
- ベストアンサー
- HTML
- TABLEセル内で改行させたいのですが・・・
いつもお世話になっております。 ＨＴＭＬ上で、名前とメールアドレスの一覧を作成しました。 すると、テーブルの列幅を指定しているにもかかわらずメールアドレスが、 改行されずに１行で表示されてしまいます。 検索した結果、「word-break : break-all」をＣＳＳで設定したら大丈夫で あることがわかったので、設定しました。 ＩＥでは、問題なく表示されたのですが、FireFoxでは、改行されません。 ＦｉｒｅＦｏｘでも、改行されるようにしたいのですが、どこを修正したら 宜しいでしょうか。 ご教授いただけますよう、どうぞ宜しく御願いいたします。 ＜Ｓｏｒｃｅ＞ <html> <head> <style type=text/css> p{ maegin:0px; word-break: break-all; } </style> </head> <body> <table border="1px"> <tr> <td width="100px">Name:</td> <td width="100px">takemoto</td> </tr> <tr> <td width="70px">E-Mail:</td> <td width="70px"><p>ytakemoto12345678@abc.ne.jp</p></td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- テーブルの幅について教えて下さい。
テーブルの幅について教えて下さい。 下のように記述しています。（実際はもっとたくさんあります） ブラウザ枠内に表示しているときはちゃんと幅が確保されますが、 ブラウザ枠より大きくなると、100pxがキープされず小さくなってしまいます。 なにか対策があれば教えて頂けないでしょうか。 print "<table border=1>\n"; print "<tr>サンプル</td>\n"; print "<td style=\"width:100px; word-wrap:break word;\">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa幅</td>\n"; print "<td style=\"width:200px; word-wrap:break-word;\">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa幅</td>\n"; print "</tr>\n"; print "</table>\n";
- ベストアンサー
- HTML
- HTMLのタグ整形スクリプトについて
PerlでHTMLのタグ整形スクリプトを作成しようと思っているのですが、 例 <html><head><title></title></head> <body><table><tr><td></td></tr></table></body> </html> ↓ <html> タブ<head> タブタブ<title></title> タブ</head> タブ<body> タブタブ<table> タブタブタブ<tr><td> タブタブタブ</td></tr> タブタブ</table> タブ</body> </html> こんな感じなんですが・・・。
- 締切済み
- CGI
- CSSのtableについて【CSSが無かったのでHTMLで…。】
<html> <head> <title>test</title> <style type="text/css"> <!-- table { border : 1px #000000 solid; text-align : center; } td,th { border : 1px #000000 solid; width : 100px; } --> </style> </head> <body> <table> <tr> <td rowspan="2"> 1 </td> <td> 3 </td> </tr> <tr> <td> 2 </td> </tr> <tr> <td colspan="2"> 3 </td> </tr> </table> </body> </html> このように入力をした場合、一番下にできるテーブル(3)2つ結合しているにもかかわらず、1つ分？の状態で文字がcenterになってしまいます。結合した(2つの)真ん中に表示させるにはどうしたらいいですか？？ 教えてください☆
- ベストアンサー
- HTML
- WinのIE5.xをすぐに試せる方へ
<head> <style> .c{line-height:260%} </style> </head> <body> <table border> <tr class=c> <td> aaa<br> bbb<br> ccc<br> </td> </tr> </table> テーブルの本文の改行の高さを高くしたつもりですが WinのIE5.xでは、line-height:260%} が有効になっていますか？
- ベストアンサー
- オフィス系ソフト
- HTML、CSSについて教えてください。
以前質問しましたが、私の準備が出来ていなくて、回答者の方にはご迷惑をお掛けしました。 改めて、以下のように質問させていただきます。よろしくお願い申し上げます。 １．縦二段、右から左へ移行は、何とか格好はつきましたが、記述に問題はないでしょうか。 2． Txtも「valign="top" align="right"」の記述したのですが、有効ではありません。記述に問題 があるのだと思いますが、色々やってみましたが、うまくいきません。 よろしくご指導いただきますよう、お願い申し上げます。 本体記述 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html><head><title>縦テーブル右から左へ</title> <meta content="text/html; charset=shift_jis" http-equiv="Content-Type"> <link href="style.css" rel="stylesheet" type="text/css"> <style type="text/css"> <!-- .vertical { writing-mode: tb-rl; direction: ltr; } --> </style> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <table border="1" cellspacing="1" cellpadding="1" align="right"> <tr> <td height="50" valign="top"><p class="sample2"><font face="ＭＳ 明朝">１</p></font></td> </tr> <tr> <td height="500" valign="top"><p class="sample2" ><font face="ＭＳ 明朝">アアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアア</font></p></td> </tr> </table> <table border="1" cellspacing="0" cellpadding="0" align="right"> <tr> <td height="50" valign="top"><p class="sample2"><font face="ＭＳ 明朝">２</font></p></td> </tr> <tr> <td height="500" valign="top"><p class="sample2"><font face="ＭＳ 明朝">エエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエエ</font></p><font face="ＭＳ 明朝"> </font></td> </tr> </table> <table border="1" cellspacing="0" cellpadding="0" align="right"> <tr> <td height="50" valign="top"><p class="sample2"><font face="ＭＳ 明朝">３</font></p></td> </tr> <tr> <td height="500" valign="top"><p class="sample2"><font face="ＭＳ 明朝">オオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオオ</font></p> </td> </tr> </table> </body></html> -------------------------------------------------------------------------- 外部記述 [sample.css] <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title></title> </head> <body> p.sample1 {writing-mode: lr-tb; vertical-align:top;} p.sample2 {writing-mode: tb-rl; vertical-align:top;} </body> </html>
- ベストアンサー
- ホームページ作成ソフト
- onmouseoverを外部にまとめる
お忙しいところすいません 以下のようなマウスオーバーで背景が変わるテーブルを制作してますが、長くなるので「onmouseover」等をまとめる方法があれば教えてください。 ■---元----------------------■ <head> </head> <body> <table> <tr> <tr> <td onmouseover="this.style.backgroundColor='#ffffcc';" onmouseout="this.style.backgroundColor='#68ceff'" bgcolor="#68ceff">リンク</td> </tr> <tr> <td onmouseover="this.style.backgroundColor='#ffffcc';" onmouseout="this.style.backgroundColor='#68ceff'" bgcolor="#68ceff">リンク</td> </tr> </table> </body> </html> ■---希望----------------------■ <head> <script language="JavaScript"> <!-- td#over { onmouseover="style.background='#ccccff'"; onmouseout="style.background='#68ceff'" } //--> </script> </head> <body> <table> <tr> <tr> <td id="over">リンク</td> </tr> <tr> <td id="over">リンク</td> </tr> </table> </body> </html> -------------------------------- ＣＳＳもJavaScript初心者ですので全く的外れな質問かもしれませんがよろしくお願いします。
- ベストアンサー
- JavaScript
- HTMLのテーブル内容を配列にするには
<html> <head></head> <body> <table border="0"> <tr> <td>りんご</td> <td>100円</td> </tr> <tr> <td>みかん</td> <td>80円</td> </tr> <tr> <td>もも</td> <td>160円</td> </tr> </table> </body></html> 上のような内容のHTMLページを読み込み、 テーブルの一番左の行（りんご、みかん、もも）の内容を @list=("りんご","みかん","もも"); このように配列に代入したいのですが、 どうすればいいでしょうか。よろしくお願いします。
- ベストアンサー
- Perl
- 一気に「テーブルの2列目のtdタグを右詰にする
<html> <head> <title>test</title> </head> <body> <table border=1> <tr><th>No</th><th>aaaaaaa</th></tr> <tr><td>1</td><td>bbb</td></tr> <tr><td>2</td><td>ccc</td></tr> </table> </body> </html> このようなテーブルで 右側の2列目のtdタグを右詰にしたいのですが、 一気に「テーブルの2列目のtdタグを右詰にする」と言う方法は有りますか? 今は <html> <head> <title>test</title> <style type="text/css"> td.example1 { text-align: right; } </style> </head> <body> <table border=1> <tr><th>No</th><th>aaaaaaa</th></tr> <tr><td>1</td><td class="example1">bbb</td></tr> <tr><td>2</td><td class="example1">ccc</td></tr> </table> </body> </html> このようにしていますが 一つ一つタグを付けるのは非効率的と思っています。
- ベストアンサー
- HTML
- エクセルでデータの個数を表示させる方法についてまとめました。
- エクセルで条件付き書式を使って赤色のセルになった個数をカウントする方法を教えてください。
- エクセルで上位三人と下位三人の順位を条件付き書式で設定し、セルの色を変える方法について解説します。
お礼
ご回答ありがとうございます。 私もChrome、FireFoxで試してみましたがIEはやはり ダメでした。何とも恨めしく思っています。 IEはあきらめようと思います。どうもありがとうございました。