3

入力要素と同様に div 要素を機能させようとしています。

http://jsfiddle.net/MRP5M/6/

入力要素がスクロールバーなしで横にスクロールする機能をどのように達成するのか疑問に思っていましたか? コンテンツを保持するために div 要素を複数の行に展開したくありませんが、input 要素でこの動作を制御する CSS プロパティが見つかりませんでした。

更新:すべての優れたソリューション。調べてくれてありがとう。入力要素のいくつかの側面は、ブラウザーによって制御されているように見えます (つまり、ハイライトからスクロール)。Javascript を使用せずにこの機能をエミュレートするのは難しいようです。最初の回答を解決策としてマークしました。

4

3 に答える 3

3

答えは次のとおりです。http://jsfiddle.net/MRP5M/12/

注意点が 1 つあります。改行を禁止する方法がわかりません....

于 2012-10-04T23:02:48.783 に答える
2
  1. 「空白：nowrap;」を設定できます .editable div 内
  2. その後、固定の高さを #wrapper (20px など) に設定し、overflow: hidden; を設定します。

私が試したように動作します。「空白: nowrap」は改行を回避するため、.editable div 内に固定幅を設定する必要はありません。

更新: マウスですべてのテキストを選択するオプションについては、Alohci がこの投稿へのコメントで「overflow: auto;」を追加できることを指摘しました。あなたの .editable div に追加すると、少なくとも試したばかりの Chrome では、必要に応じて動作します。Alohci は、フィドルも指さしました。彼の功績。

于 2012-10-04T23:06:14.300 に答える
1

入力フィールドの外観と動作は、ブラウザー自体によって制御されます。CSS を使用して、テキストが壊れないようにすることができます。

この実用的なフィドルの例を見てください!

.editable {
   white-space: nowrap;
}

スクロールバーを使用せずにスクロールするには、JavaScript を使用するか、HTML を次のようにinput偽装することによってのみ達成できdivます。

この実用的なフィドルの例を見てください!

HTML

<div id="wrapper">
   <input type="text" value="A really long string of content" />
</div>
<input type="text" value="A really long string of content" />

CSS

#wrapper{
   width: 151px;
}

#wrapper > input {
   border: 0 none;
   background-color: white,
   color: black;
}
于 2012-10-04T23:10:08.370 に答える