忍者ブログ

カウンター

プロモーション

カレンダー

10 2024/11 12
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

AntinomyMy の実験室

   私のWEBアプリ実験室です!

ブログ内検索

楽天でお買い物

twitter

最新トラックバック

最新コメント

忍者アナライズ

ウェザーニュース

バーコード

本を買う

アクセス解析

Google+

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。


  • 2024/11/21 20:10

長文なアンカーをボックス(pre)要素内で改行

HTML のスキーマの調べ物

まず、動くけど無駄な間違いあり!!!

<pre style="height: 300px;width: 300px;background: #00aa00;"><a style="overflow: visible; color:#ff00aa;zoom: 1;white-space:normal;
            white-space: pre;           /* CSS 2.0 */
            white-space: pre-wrap;      /* CSS 2.1 */
            white-space: pre-line;      /* CSS 3.0 */
            white-space: -pre-wrap;     /* Opera 4-6 */
            white-space: -o-pre-wrap;   /* Opera 7 */
            white-space: -moz-pre-wrap; /* Mozilla */
            white-space: -hp-pre-wrap;  /* HP Printers */
            word-wrap: break-word;      /* IE 5+ */
            ">123aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a>
</pre>


うーん。。。。
これ間違ってました!!!!!!!!!!!!!!
a にハックかける必要ないんじゃないか?ってこと。

入れ物にハックして、アンカーを改行するんじゃないか?


pre タグの機能は、css の
white-space: pre;
と同等だとか言う話だが、それで動かなかった・・・・

うーん・・・・

まぁいいや、時間がないので次回実験だ(ぁ

って、次回の前に気になったので変えてみた・・・・


<div style="height: 300px;width: 300px;background: #00aa00;float: left;
            white-space: pre;           /* CSS 2.0 */
            white-space: pre-wrap;      /* CSS 2.1 */
            white-space: pre-line;      /* CSS 3.0 */
            white-space: -pre-wrap;     /* Opera 4-6 */
            white-space: -o-pre-wrap;   /* Opera 7 */
            white-space: -moz-pre-wrap; /* Mozilla */
            white-space: -hp-pre-wrap;  /* HP Printers */
            word-wrap: break-word;      /* IE 5+ */"><a>123aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a>
</div>

これ動く!

Firefox で有効なのを見たら
    white-space: pre-wrap;
    word-wrap: break-word;
だけだった
<div style="height: 300px;width: 300px;background: #00aa00;float: left;
    white-space: pre-wrap;
    word-wrap: break-word;">
<a>456aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a>
</div>

div をpre にして・・・・も意味あるのかな?

これで動かないbrowserのためのハックなんだろうか?

ネットから拾ったハックの部分、謎過ぎる

追伸:
結局これを使う様になった・・・

.pre-hack-on-anchor{
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-break: break-all;
/word-wrap: break-word; /* IE 5+ */
}

word-break: break-all; がスマホとかで使うみたい、
IE はIE だけ解釈できた /を入れているが、
多分もうIE用の word-wrap: break-word; は入れなくても
どちらでもいい^^;




お粗末なブログでした<_ _>

拍手[0回]

PR


  • 2015/12/10 00:36

コメント一覧

  • お名前
  • Email

  • コメント

  • Vodafone絵文字 i-mode絵文字 Ezweb絵文字
  • パスワード
[PR]