質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

1529閲覧

半角の「?」が改行されない

JInnn

総合スコア15

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

3クリップ

投稿2019/07/27 09:38

半角の「?」が改行されません。
たとえば、
????????????????????????????????????????????????????????????????????????????
を、
fieldsetの中に書き込んでも、そのまま横に続いて行ってしまいます。なのでcssに、

CSS

1fieldset{ 2 word-break:break-all; 3 word-wrap:break-word; 4 overflow-wrap : break-word; 5}

を追加してみましたが、全く変化がありません。
これって、対処法はあるんですか??

Lhankor_Mhy👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoshinavi

2019/07/27 12:03

HTMLも提示してください。
think49

2019/07/30 23:39

To: JInnnさん 私はTakamosoさんの回答で解決できました。 ベストアンサーを選ぶか、分からない箇所を追加質問する等して、質問を一歩先に進めて下さい。
guest

回答3

0

ベストアンサー

css

1fieldset { 2 min-width: 0; 3 word-wrap: break-word; 4 overflow-wrap: break-word; 5}

Chromeで確認してみましたが、これでどうでしょうか。

投稿2019/07/27 12:04

Takamoso

総合スコア248

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yasutomi

2019/07/27 14:27

これが正解ですね。 (Reflowが原因?)
think49

2019/07/28 01:48

Reflowは関係ないのでは。 直接的原因は、ComputedStyleで fieldset { min-inline-size: min-content; min-width: min-content; } が指定されている事でしょう。 現象発生しないdiv要素に同スタイルを適用すれば再現出来ます。 div要素では writing-mode も視野に入っているようで、div { min-inline-size: 0; min-width: 0; } が指定されています。 https://triple-underscore.github.io/css-sizing-ja.html#min-size-properties https://triple-underscore.github.io/css-logical-ja.html#dimension-properties
guest

0

なかなか興味深いですねえ……

css

1fieldset{ 2 word-break: break-word; 3 word-wrap: break-word; 4}

↑のコードで、Firefox,Chrome,IE11で折り返されることを確認しました。

ただ、面白い結果なのでサンプルを見ていただきたいのですが、
Firefoxでは???...###...についてword-break: break-word;が必要なのですが、
Chromeについては???...word-break: break-word;が必要になります。
IE11は???...word-wrap: break-word;が必要です。
また、サンプルには書いていませんが、Firefoxはoverflow-wrap: anywhere;でも対処できるようです。

CSSの仕様書を眺めてみましたが、どうしてこうなるのか、についてはよくわかりませんでした。

HTML

1<fieldset class="break-word"> 2???????????????????????????????????????????????????????????????????????????? 3</fieldset> 4<fieldset class="break-word"> 5############################################################################ 6</fieldset> 7<fieldset> 80000000000000000000000000000000000000000000000000000000000000000000000000000 9</fieldset> 10<fieldset> 11dadadadadadadadadadadadadadadadadadadadadadadadadadadadadadadadadadadadadada 12</fieldset>

css

1fieldset{ 2 word-break: break-all; 3} 4.break-word{ 5 border: solid red; 6 word-break: break-word; 7 word-wrap: break-word; 8}

投稿2019/07/29 01:14

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

Chromeのバグです。
対処法はspanタグで囲みます。

html

1<span>?</span><span>?</span><span>?</span>

投稿2019/07/27 12:02

yasutomi

総合スコア2937

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問