- 締切済み
htmlでダブルクォーテーションを自動改行したい。
☆css部分 p.sample {width:150px; background-color:#99cc00; word-break: break-all;} ☆html部分 <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <p class="sample"> テテキストテキストテキストテキストテキストテ、キストキスト。<br> """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""" text texttexttext texttext text texttext texttexttexttext </p> </body> </html> 上のようなwidthが指定されてる状態で、word-breakを使用したのですが、自動改行がされません。 どうして自動改行されないんしょうか？ どなたか教えてください。よろしくおねがいします。
- sasakikou
- お礼率66% (4/6)
- HTML
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
本来なら、word-break: break-all;というIE独自のスタイルシートがなくても、ZERO-WIDTH-SPACEの​で連結すると改行しなければならないはずですが、Firefox,Opera,Safari,Google Chromeは、word-break: break-all;の有無にかかわらず、当然の様に改行してくれるのですが、IEだけは互換モードも標準モードも、word-break: break-all;の有無にかかわらず改行しません。 "​"​"​"​"​"​・・ () " " " " " " ・・ ( )( ) でかわすしかないかも。
- think49
- ベストアンサー率59% (285/482)
wordbreakはCSS3で策定中ですが、css3.com に寄せられた情報によると、Firefox3, Operaはサポートしてないようです。 CSS 3におけるテキストの自動改行と禁則処理の定義 - builder by ZDNet Japan http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20381014,00.htm CSS WORD-BREAK - CSS3.com: CSS reference guide, and blog http://www.css3.com/css-word-break/ なので、JavaScriptと併用する必要がありますね。 FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」[to-R] http://blog.webcreativepark.net/2008/09/14-211341.html
ブラウザはIEをご利用ですか？ ご確認ください。
補足
回答ありがとうございます。 ブラウザはIE6です。 firefoxでも確認してみましたが自動改行がされていませんでした。
関連するQ&A
- 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
- 背景色を指定したのに反映されません。
CSSは外部ファイルに記述しています。 画像のように色をつけたいのですが、うまくいきません。 上端から150pxです。テキスト・画像を表示しないで背景色のみの表示もできますでしょうか? ・HTML <body>間のみ ※<head>間に<link rel="stylesheet" href="sample.css" type="text/css">の記述はあります。 <body> <div class="color1"><p class>文字など（できれば入れない）</p></div> </body> ・CSS（sample.css） <style type="text/css"> div.color1 { width: 100%; height: 150px; color: black; background-color: blue; } </style> 同じ階層?に両ファイルはあります。
- ベストアンサー
- CSS
- ＣＳＳで自動改行させたくない。
スタイルシートやテーブルで、幅を指定してあげると その幅にあわせて自動改行したりとか、その枠内の背景だけを 変更することができると思うんですが。 スタイルシートでやっても、なぜかうまくいきません。 今は、あきらめてテーブルでやってるんですが。 何がよくないのか、教えていただければ幸いです。 根本的な基本が、わかってないんですかね？ ＣＳＳ #main { width:760px; overflow:visible; } #head { width:760px; bgcolor: #ff0000; } .head-img { padding: 0px; margin: 0px; float:left; } #menu { width:760px; margin: 0px; padding: 0px; bgcolor: #ff0000; } .menu-buttom { margin: 0px; padding: 0px; } ＨＴＭＬ <html> <head> <link href="base.css" rel="stylesheet" type="text/css"> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div id="main"> <div id="head"> <div class="head-img"><img src="img/head_img.jpg"></div> </div> <div id="menu"> <img src="img/menu_left.gif" width="20" height="30"><img src="img/menu_top.gif" border="0" width="180" height="30" name="img_m1"><img src="img/menu_hp.gif" border="0" width="180" height="30" name="img_m2"><img src="img/menu_com.gif" border="0" width="180" height="30" name="img_m3"><img src="img/menu_inq.gif" border="0" width="180" height="30" name="img_m4"><img src="img/menu_right.gif" width="20" height="30"> </div> </div> </body> </html>
- ベストアンサー
- CSS
- phpでこのイコールは代入演算子ですか？ <l
phpでこのイコールは代入演算子ですか？ <link rel="stylesheet" type="text/css" href="stylesheet.css"> ↑このイコールです link relにstylesheetを代入するという意味ですか？ ↓他にもたくさんありますが、このイコールは代入演算子なんですか？ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Progate</title> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head> <body>
- ベストアンサー
- PHP
- 画面の常に一番下に枠を表示させたいのですが
画面の常に一番下（もしくはその少し上）に枠（太い線=tableのようなもの）を表示させたいのですが、 うまくいきません。 下記私の書いた初歩的なcssだと画面の上に ２段で表示されます。 よろしくお願いします。 CSS p.sample1 {background-color: #f8dce0; margin-top: 50px;} p.sample2 {background-color: #f8dce0; margin-bottom: 50px;} html <html> <head> <link rel="stylesheet" href="haikei.css" type="text/css"> </head> <body> <p class="sample1">上マージン50px</p> <p class="sample2">上マージン50px</p> </body> </html>
- ベストアンサー
- CSS
- ブラウザの解像度横幅1280の時スタイルシートを記述したいのですが
記述が間違ってると思われうまくいきません。 どなたか間違ってるところを指摘してくださいませ。。 初心者ですお願い致します。 <html> <head> <title>モニタサイズに合わせてウィンドウサイズを変更する</title> <script Language="JavaScript"><!-- w = screen.width; moveTo(0,0); if (w == 1280) { document.write ("<link rel=stylesheet href="'+ a.css +'" type="text/css">"); } else if () { document.write("<link rel=stylesheet href="'+ b.css +'" type="text/css">"); } // --></script> </head> <body> </body> </html> なおa.cssには、背景黒くしてます。
- 締切済み
- JavaScript
- PHPファイル内でCSSが反映されない
php5&MySQL5&XPでプログラム作成中です。 phpファイル内のhtmlの中に簡単なスタイルシートを埋め込んでいるのですが、 スタイルシートの部分が反映されません。 ご教授いただけると幸いです。 --haikei.css p.sample1 {background-color: #f8dce0; margin-top: 50px;} p.sample2 {background-color: #f8dce0; margin-bottom: 50px;} --login.php <?php --phpのプログラム ?> <html> <head> <link rel="stylesheet" href="haikei.css" type="text/css"> </head> <body> <p class="sample1">上マージン50px</p> <p class="sample2">上マージン50px</p> </body> </html>
- ベストアンサー
- PHP
- HTMLの禁則処理解除について
↓にて質問させていただいたのですがうまくいかなかったのでもう一度質問させてください。 http://okwave.jp/qa/q8552159.html 上記で教えていただいたことをもとに禁則処理により不自然な折り返しを解除しようとしたのですが うまくいきませんでした。「line-break」というのも付けてみましたが結果は同じで不自然な位置で 折り返しが発生しています。試した環境はIE11になります。 下記がそのHTMLになります。 <html> <head> <style type="text/css"> td { word-break: break-all; word-wrap: break-word; line-break: normal; } </style> </head> <body> <textarea name="MSG" cols=40 rows=4 style="word-break: break-all;word-wrap: break-word;line-break: normal;">テスト中です。サンプルテキスト！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！</textarea> <table border="1"> <tr> <td width="400" style="word-break: break-all;word-wrap: break-word;line-break: normal;"> テスト中です。サンプルテキスト！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！ </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- <pre> でも自動で改行させることは出来ますか？
ワードの文書を html にしたいと思ってるのですが、 <p> など入れるとかなり手間がかかるので <pre> に入れたいのですが、 そうすると改行はされませんよね container に自動でおさまるようにする css などありますでしょうか？
- ベストアンサー
- CSS
- font-familyで書式が指定しても変化しない
cssでfont-familyを指定しているのですが、 デフォルト書式のまま変化しません。 原因が分からないのですが、可能性として どんなことが考えられますか？ ちなみにエディタはTeraPadです。 html <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-style-type" content="text/css; charset=utf-8" /> <link href="css/base.css" rel="stylesheet" type="text/css"> <head> <body> <p>テスト</p> </body> </head> css p{ font-family:ＭＳ明朝; }
- ベストアンサー
- CSS
お礼
ありがとうございます。参考にさせて頂きました。 おかげさまで上手くいきました、ありがとうございます。
補足
ありがとうございます。 当方のほうでもwordBreak.jsを使用しまして文字の間に半角スペースを入れてみました。 結果、safari、firefoxでは正常に表示されました。 IE6のほうでは、「幅のある半角スペース」が付いてしまいました。 エンコーディングがSJISだとうまくいったんですが・・・。 エンコーディングはUTF8が前提でした。 I