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

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

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

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

Q&A

解決済

3回答

2454閲覧

ie8等でも英文の途中で改行させる方法を教えてください

makoto-n

総合スコア436

CSS

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

0グッド

0クリップ

投稿2017/01/26 10:52

レガシーブラウザ(css3をサポートしていないブラウザ)に対しても、自分の想定する形を提供したいのですが、
現在**「word-wrap word-break」**に関して悩んでいます。
この二つのcssはcss3のようなのでなるべく使わないとして、word-wrap word-breakを指定しないで英文を途中で改行させる方法を探しています。

今はこうなってしまうことに困っていますが、
イメージ
飛び出している要素のブロックに横幅を指定するのがいいですか?

また、css2やcss1に「word-wrap word-break」のような挙動をしてくれる物はありますか?

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

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

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

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

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

guest

回答3

0

ベストアンサー

word-breakプロパティを使えば強制改行できます。
CSS3の要素ではありますが、元々IE独自採用されていた要素のようで、IE8でも問題なく使えます。
クライアントワークでも同様の要望の際はこちらの要素使って対応してしまいます。
英単語の途中でも改行されてしまいますので、本来はあまり使用しないほうが良いのでしょうが…

css

1.任意のclass { 2 word-break: break-all; 3}

ご参考:CSS3リファレンス

投稿2017/01/26 11:26

momi

総合スコア40

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

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

makoto-n

2017/01/26 11:31

>> IE独自採用されていた要素 なるほど! そうでしたか。 とてもためになりました、ありがとうございました。
guest

0

今更、指摘するのも何ですが、IE8 は word-wrap プロパティをサポートしています
MDN によれば、IE5.5+ から実装しています。

Re: makoto-n さん

投稿2017/01/28 11:05

think49

総合スコア18156

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

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

makoto-n

2017/01/28 15:28

いえいえ、そうですね。 ありがとうございます。 今回のようにペルソナを絞るのであれば、独自サポートのcssプロパティについても勉強するに越したことは無いですね。
guest

0

レガシーブラウザは具体的にどれまで対応するのかを決めてから考えないと無駄な記述ばかり増えることになりますよ。

下記ページの「Show all」を押せばIEが word-break にどのバージョンから対応しているかを確認できると思います。

【Can I use... Support tables for HTML5, CSS3, etc】
http://caniuse.com/#feat=word-break

投稿2017/01/26 11:05

kei344

総合スコア69366

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

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

makoto-n

2017/01/26 11:18

ありがとうございます、ie11まででした。 いっそのことレガシーブラウザとしてターゲットするのはie8まででいいかもしれないです。 理由としてはxpのサポートがie8までということからです。 未だにxpを使用しているユーザーは多いでしょうから。 特に自分の今回の仕事内容としてはie8が一番ターゲティングするべきブラウザでもありますので。
kei344

2017/01/26 12:39

> ie11まででした。 ie6-11まで対応していますよ。
makoto-n

2017/01/28 02:45

すみません、使い方をわかっていませんでした。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問