飯と自炊.gaming

meshi to game to hoka moromoro

chatTOP
|
photo_libraryPHOTO
|
homeHOME

No.14

一生CSSと格闘してる。

文章投稿してるてがろぐでは本文下にフッターのようなタグエリアを任意装飾で入れているのだが、これの改行が上手くいかない。厳密に言うとFirefox以外上手くいかない。
泥版Firefoxスクショ
これがFirefox。これを撮るだけに今泥版Firefoxインスコした。
泥版Chromeスクショ
これがChrome。

Chromeは禁則処理が上手くいかなくて#が行末に来てしまう。何でだよ。
と必死こいて調べたらどうやらFirefoxは禁則処理に厳しいらしい。動作確認はメインブラウザのFirefoxで行っていたので気づくまで時間がかかった。何でメインでFirefoxなんて使ってるんですか? 初めてPCもらった時父にそうセッティングされたのずっと惰性でやってるから……。
閑話休題。とにかくChromeの禁則処理が甘い。どれだけ指定しても効かないぐらい甘い。発狂するほど甘い。なのに今Chromeで打ち込んでるテキストエリアだとしっかり行末禁則守ってんだよな。何なんだよお前。あとでここのCSS見るか。

↑朝になってPC点けてソース見た。
テキストボックス部分の折り返し設定は
overflow-wrap: break-word;
overflow: auto;   

で、これを設定したら予想通り単語中に改行するようになった。それじゃダメなんだってば。単語で折り返さないようにしつつ#が文末に来ないようにしたいんだってば。
ちなみに現在の設定は
word-break: keep-all;
line-break: strict;
overflow-wrap: anywhere;

にしている。一番厳しい禁則処理して単語単位で折り返して長すぎてはみ出した部分は改行する……ようになってるはず。overflow-wrap要素いるか?と思ったがこれ抜くと何故かFirefoxですら崩れる。何でだよ。
CSS分かんないよ~~~~~~~~~~~~~!!!!!!!!!!!!!!!!!

人類なんてChromeかSafariの二択やろと思っているのでマジで直したい。見た目が悪いの最悪すぎる。こんなの発狂する。Edgeはブロック要素の装飾すら言う事聞かないのでもう知らん。Edge使ってるのなんて公務員だけでしょ。それも職場だけ。実体験です。

そんなこんなで格闘してたら3時間ぐらい溶けた。夕食食べるの完全に忘れた。もうカップ麺作るのすらだるいから今日の晩御飯はおせんべいです。まがりせんべいこそ至高。

マジでCSSの本買うしかねぇかなぁ……。ネットこれだけ漁って設定してなお効かないのに本買って解決すんのか? という疑問はあるけど。

とりあえず明日は本屋に行くぞ。コロコロ買いたいし。ランダムだが付録でムウマのご先祖様みたいなポケモンが手に入るらしい。あの子を見てSVを始めたので欲しい。あとコロイカビッグラン回だしな。最近はサンサンサングラスくんとエイトくんの組み合わせが熱いと聞いています。エイトくんやっぱバイトやってんのか。そりゃ金が無けりゃ強いチムメン集められないしな。

あーーーーーーーー滅びろChrome。禁則処理ぐらいしろ。日本語を慮れ。

で、上の追記した後ググりまくったら日本語フレーズでの改行設定を見つけた。試した。ダメだった。
タグの間に半角スペースが入ってるのが原因では?と思い半角スペースを消しtaglink要素で若干の空白を作った。Firefoxでも崩れるようになった。
[[COMMENT:TAGS]]を使えばいいんだろうけど、そうなると本文中にタグを書かねばならない。それって美しくない。のでハッシュタグの隠し方を探さねばならない。めんどくせぇな!!!!!!!!
↑コメントアウト機能を使ってタグをコメントアウト、onelog.htmlに[[COMMENT:TAGS]]を挿入し装飾ならいける……と思ったけどダメでした!!!!!!!!!!! そもそもコメントアウト機能はhtmlに出力されないからハッシュタグカウントが意味無い!!!!!!!!!!!!!!!!!!!!

もうマジでChromeが滅びるかFirefox並に禁則処理厳密になれ。
#サイト

サイト関連


expand_less