19

HTMLファイルの「視覚的な正確さ」のためのバリデーターを書いています。目標は、幅が広すぎる要素を検出することです。

ここに私の問題のデモがあります。

赤い点線は、ドキュメントの最大幅 (この例では 200px) を示しています。最初の段落は問題ありませんが、2 番目の段落は広すぎます。それにもかかわらず、次のコマンドはすべて幅として「200px」を返します。

// all return 200, but the value should be larger   
$('#two').width();
$('#two').outerWidth();
$('#two').prop('clientWidth');

詳細については、フィドルを参照してください。

このような特大の要素を検出するにはどうすればよいですか?

更新された質問:親要素の境界を超えるテキストを検出するにはどうすればよいですか?

更新された要件:ソースの HTML または CSS を変更することは許可されていません。しかし、幅が広すぎる要素を検出できるように、jQuery を使用してドキュメントを変更したいことは何でもできます。

4

6 に答える 6

14

他の人が言ったように、テキストノードをインライン要素で一時的にラップします。

var two = document.getElementById('two'),
    text = two.firstChild,
    wrapper = document.createElement('span');

// wrap it up
wrapper.appendChild(text);
two.appendChild(wrapper);

// better than bad, it's good.
console.log(wrapper.offsetWidth);

// put it back the way it was.
two.removeChild(wrapper);
two.appendChild(text);

http://jsfiddle.net/vv68y/12/

getInnerWidthこれはあなたに役立つはずの関数です。要素を渡すと、ラッピングとアンラッピングが処理されます。

function getInnerWidth(element) {

    var wrapper = document.createElement('span'),
        result;

    while (element.firstChild) {
        wrapper.appendChild(element.firstChild);
    }

    element.appendChild(wrapper);

    result = wrapper.offsetWidth;

    element.removeChild(wrapper);

    while (wrapper.firstChild) {
        element.appendChild(wrapper.firstChild);
    }

    return result;

}

http://jsfiddle.net/vv68y/13/

于 2012-04-23T09:16:05.727 に答える
6

この効果は「シュリンクラップ」と呼ばれ、要素の「実際の」幅を決定する方法がいくつかあります。

浮く

使用できる方法の 1 つは<p>要素をフロートすることです。これにより要素ができるだけ小さくなりますが、div 内の何かがフロートしている場合はclearfixを使用する必要があります。

#two { float: left; }

インラインブロック要素

インライン要素の挿入は機能するはずです。

<p>content</p>

になるだろう

<p><span>content</span></p>

絶対配置要素

要素の位置を絶対位置に変更しても機能するはずです。

#two { position: absolute; }

マークアップやスタイルを静的に変更できない場合は、JavaScript を使用していつでも動的に変更できます。

(絶対配置要素)

var realWidth = $("#two").css("position", "absolute").width();

（浮く）

var realWidth = $("#two").css("float", "left").width();

(インラインブロック要素)

var t = $("#two").html();
var realWidth = $("#two")
    .empty()
    .append($("<span>").html(t))
    .width();
于 2012-04-23T08:56:38.133 に答える
1

それに適用word-wrap: break-word;します..単語が壊れて、コンテナからテキストが出ないようにします...ところで、コンテナから出るテキストの幅を確認することはできません。

例

更新：このように、テキストの幅がコンテナの幅よりも大きいかどうかを確認できます

于 2012-04-23T08:51:18.163 に答える
0

要素自体は 200px に制限されていますが、中のテキストははみ出しています。P タグ内にスパン (または他のインライン要素) を挿入すると、正常に機能します。

http://jsfiddle.net/will/vv68y/5/

それが役立つことを願っています:)

于 2012-04-23T08:48:52.037 に答える