< BACK TO "htmlstudy002.htm"> < linkdetail01.htm > < indextable01.htm > < index.html >
bodystyle_study_01_002
〜BlueGriffonでウェブページ制作〜
Google検索結果などの長いURLアドレスをそのまま表示すると、折り返しがうまくいかず、width:98%での幅の設定が意図通りに表示されなくな
る。ここを課題にします。
(... 2022R04-0720-WED-1341)
【CSS】自動で文字を折り返し表示させる！？overflow-wrapとword-breakの特徴と使い方 - WEBCAMP MEDIA
https://web-camp.io/magazine/archives/90797
分析中です。tableでではなくbodyで使います。
Q. widthの%表示を乱さず、記入URLを表示する方法
TEST a.「スタイル プロパティ(※1)」の[一般]から[折り返し：]で[任意箇所で折り返し]で、styleに、overflow-wrap: break-word; が挿入されます。それがこのページです。
※1 無い場合はメニューの[パネル]から[スタイル プロパティ]をチェック。ウィンドウ右側に開きます。
html 折り返し css 自動 - Bing Search
https://www.bing.com/search?q=html+%E6%8A%98%E3%82%8A%E8%BF%94%E3%81%97+css+%E8%87%AA%E5%8B%95&qs=n&form=QBRE&sp=-1&pq=html+%E6%8A%98%E3%82%8A%E8%BF%94%E3%81%97+css+%E8%87%AA%E5%8B%95&sc=0-16&sk=&cvid=73B7259B74C147AC86E3F039AB258E62&ghsh=0&ghacc=0&ghpl=
word-break break-all url - Bing Search
https://www.bing.com/search?q=word-break+break-all+url&qs=n&form=QBRE&sp=-1&pq=word-break+break-all+url&sc=8-24&sk=&cvid=3FB64C76212F47F5A97055A8D18403F1&ghsh=0&ghacc=0&ghpl=
慣れても過信せずstyle挿入後やspanタグ挿入、削除、ctrl+zの後などは、ソースを開いて該当箇所のソースコードを確認しましょう。ボクは今回 確認せずに失敗してしまい、使わないstyleが残ってしまいました。あとからソースコードに手を入れずに削除する仕方がわかるかもしれませんのでそれまでこ れは教訓として残しておきます。
あと、タブレットやスマホで、このページを確認します。
(... 2022R04-0722-FRI-1653)
(... 2022R04-0722-FRI-1717)
(... 2022R04-0722-FRI-1756)
(... 2022R04-0722-FRI-1815)
結果は、うまくいっていますが、もう少し色んなURLを試さないとわからないと思います。そのあと、word-break: break-all; を使って見たいですね。b-reak。どこにあるんでしょう？
(... 2022R04-0722-FRI-2043)
<<< bodystyle_study_01_002.html >>>
CC BY tDG.