11

でスタイル設定された div がありますがoverflow-x: hidden、その中にテキストを含むより広い div がある場合、ユーザーはマウスで横にドラッグして非表示のテキストを表示できることがわかりました。

それを防ぎ、テキストを本当に非表示にしたいと思います。このjsfiddleは、私が何を意味するかを示すはずです:http://jsfiddle.net/YzsGF/11/またはここにコードがあります:

<div id="outer">
   <div id="inner">
       How can I truly hide the text beyond the margin?
    </div>
</div>
#outer { 
    width: 150px; 
    height: 300px; 
    overflow-x: hidden;
    border: 1px solid black;
}
#inner { 
    width: 300px;
    overflow-x: hidden;
}

ユーザーが非表示のテキストを表示できないようにする方法はありますか?

更新: 動作させるには、overflow-y が必要です。overflow-x が CSS3 のみであることは問題ありません。実際のシナリオを説明すると役立つ場合があります。

  • 幅が固定されているが長さが不明な内部 div があります。
  • y スクロールバーなしで外側の div に収まるほど十分に短い場合は、すべて問題ありません。
  • 外側の div が y スクロールバーを必要とするほど内側の div が長くなると、y スクロールバーが表示されますが、内側の div の右側のコンテンツの一部が切り取られます。それも問題ありません (意図的に RH パディングを残しました) が、ユーザーがテキストを選択して横にドラッグすると、空の RH パディングが表示され、LH 側のテキストの一部が非表示になる可能性があります。

解決策はありますか？

4

5 に答える 5

2

overflow-x: hiddenとは異なり、overflow: hiddenスクロールを無効にしません。コンテンツがクリップされ、スクロールバーが非表示になるだけです。要素自体は、javascript を介して、または要素が自動スクロールするいくつかの選択シナリオでわかったように、引き続きスクロール可能です。

JavaScript 以外の解決策はありません。スクロールバーが表示されていない場合は onscroll が起動しないため、javascript は依然として厄介です (つまり、onscroll イベントは、要素の実際のスクロールではなく、スクロールバーの位置の変更に関連付けられています)。

さまざまな回避策があります。overflow:hiddenラッパーに配置し、ラッパーをコンテナーの幅に設定するというAndrew Dunn のソリューションは 1 つです。しかし、それは問題を回避するだけで、実際の問題は解決しません。しかし、それでよければ、それはおそらく良い選択です。この手法をコンテナ内のすべてのアイテムに適用する必要があることに注意してください。そうしないと、同じ問題が発生する可能性があります。

于 2012-04-13T15:52:35.513 に答える
2

内側の div の y 軸をスクロール可能にする必要があるかどうかはわかりませんが、そうでない場合は、これがニーズに合うはずです。

#outer { 
    width: 150px; 
    height: 300px;
    overflow-x: hidden;
    border: 1px solid black;
}
#inner { 
    overflow: hidden;
    width: 100%;
}​

オーバーフローとオーバーフロー x の動作が互いに異なるように見えます。 http://jsfiddle.net/G3T9w/5/

于 2012-04-13T15:42:02.617 に答える
2

CSSclipプロパティを使用できます。これにより、クリッピング四角形を超えて何も表示されないため、必要に応じてテキストがクリップされ、ユーザーがスクロールするのも停止します。

#inner { 
position:absolute;
clip:rect(0px,150px,150px,0px);
width: 300px;
}

例：

http://jsfiddle.net/DigitalBiscuits/YzsGF/18/

注: クリップ プロパティが動作するようにするには、絶対位置を指定する必要があります。

詳細はこちら: http://www.w3schools.com/cssref/pr_pos_clip.asp

于 2012-04-13T22:20:47.180 に答える
0

私にとって最も簡単な答えはposition: fixed;、<body>タグに CSS スタイルを追加することです。

于 2016-05-03T16:33:01.090 に答える