
☆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を使用したのですが、自動改行がされません。
どうして自動改行されないんしょうか?
どなたか教えてください。よろしくおねがいします。
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
本来なら、word-break: break-all;というIE独自のスタイルシートがなくても、ZERO-WIDTH-SPACEの​で連結すると改行しなければならないはずですが、Firefox,Opera,Safari,Google Chromeは、word-break: break-all;の有無にかかわらず、当然の様に改行してくれるのですが、IEだけは互換モードも標準モードも、word-break: break-all;の有無にかかわらず改行しません。
"​"​"​"​"​"​・・
()
" " " " " " ・・
( )( )
でかわすしかないかも。
この回答への補足
ありがとうございます。
当方のほうでもwordBreak.jsを使用しまして文字の間に半角スペースを入れてみました。
結果、safari、firefoxでは正常に表示されました。
IE6のほうでは、「幅のある半角スペース」が付いてしまいました。
エンコーディングがSJISだとうまくいったんですが・・・。
エンコーディングはUTF8が前提でした。
I
No.2
- 回答日時:
wordbreakはCSS3で策定中ですが、css3.com に寄せられた情報によると、Firefox3, Operaはサポートしてないようです。
CSS 3におけるテキストの自動改行と禁則処理の定義 - builder by ZDNet Japan
http://builder.japan.zdnet.com/sp/css-firefox-sa …
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-21134 …
No.1
- 回答日時:
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS htmltとcssのコードで 1 2022/11/26 13:37
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの勉強を始めました。
-
ロールオーバーのタグについて...
-
GoliveでEメールリンクを作る時...
-
HPに文章で改行はすべてBRタグ...
-
改行コード
-
モニタがでかくなると改行され...
-
ヤフーオークションについて
-
HTMLのIMGタグについて
-
TeraPadからブログに貼り付ける...
-
Hタグを改行禁止にしてspanのよ...
-
改行したときの幅を狭くする方法
-
バナーリンクと文字の間の下線...
-
HTMLで書いた表の上部にはみ出...
-
画像にリンクを張るとレイアウ...
-
背景色のつけ方で、良い方法あ...
-
連続した<span>の改行
-
空白行の多いHTMLにはどんな意味が
-
xhtml対応でWYSIWYGありのフリ...
-
HTMLバージョンなど、色々...
-
許可されないタグ
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
H1タグに改行の<br>を使う
-
Hタグを改行禁止にしてspanのよ...
-
改行できる・できない入力ボッ...
-
\\n \\r \\t について
-
テーブルの幅を固定するとnowra...
-
「:」について
-
span要素にのみwhite-space: no...
-
VBE でスペースと改行を見える...
-
XMLの改行方法とリンクの仕方
-
長いURLを途中で改行(折り返す...
-
テーブルのセルデータを自動改...
-
文字の最後に半角空白が勝手に...
-
テキストエリア内の改行もその...
-
テキストエリア内の改行禁止
-
preタグがプロの現場であまり使...
-
高校1年生情報の問題について。
-
ddの行の折り返しをしたいです...
-
<br style="clear:both;">って...
-
Dreamweaverの改行コードをLFに...
-
PCの画面を縮小したらサイズ...
おすすめ情報