課題管理26の件_記事ページで半角英数が折り返さずにはみ出します_タイトルパンクズだけではなく本文もです。CSSの回避策提案_20200624_1920_hankakueisuujihankakueisuujinanikanohyousinibaguttarisitatokikokoderra-kuzuregaokirukanouseitakaidesuuuuuuuuuuuuusdあkashfb●
タイトルに半角英数を羅列してみます。文字制限はあるけど・・・半角英数が長く続くと折り返さないやつ。
↓の一覧ページでのレイアウトは大丈夫そう。
新着記事一覧
http://test.fourteenmagazine.jp/article/
カテゴリー一覧
http://test.fourteenmagazine.jp/article/category/newsrelease/
パンクズと、記事のタイトル部分、それから
タイトルだけでなく、本文にも半角英数あると はみ出ます！スマホでも崩れます。
CSSの修正お願いしたいです。
↓これです！！！！20200624_1955
ここから_abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzここまで。本文半角英数。
ーーーーーーーー
http://test.fourteenmagazine.jp/article/category/newsrelease/
↑ a タグ使った場合は 折り返し大丈夫にしてるのにね。。。
a {
word-break: break-all;
text-decoration: none;
}
↓リードや、本文に、URLのテキストだけで書くと折り返さない。これを直したい。スマホとかではみ出る。
http://test.fourteenmagazine.jp/article/category/newsrelease/
ーーーーーーーー
【CSSの取り急ぎの回避策提案】20200624_1926
ーー取り急ぎ、CSSの ーーーー
タイトルは ↓とかに
#second .main .contents_box .list_news h1
本文は ↓とかに
#second.detail .contents_news .text_area .text
word-wrap: break-word;
を追加したら 折り返すようならないですか？
ーーーーーーーーーーーーーーーーーーーーーーーー
パンクズもCSS部分は
.breadcrumb ul li span {
width: max-content;
}
↑を↓とかにしたら、
.breadcrumb ul li span {
/*width: max-content;*/
display: inline-block;
width: 99%;
height: 1em;
overflow: hidden;
line-height: 1.1em;
word-wrap: break-word;
}
はみ出た分は非表示になっちゃいますが、
パンクズなので、全部表示されなくても、
レイアウト崩れるよりいいかと。
ーーーーーーーー
半角英数問題、
記事とかのフリー入力の際のCSSには設定しておいたほうがいい内容 なのでお願いしたいです。
参考 word-wrap
ーーーーーーーー
上記の修正で、
課題管理25のパンクズはみ出る件 もひとまず解決するのはず・・・
ーーーーーーーーーーーーーーーー
↑PC
↓スマホ
