使DIV元素包含類似於輸入元素的文本？

我正在嘗試使div元素的工作方式與輸入元素的工作方式類似。使DIV元素包含類似於輸入元素的文本？

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

我想知道輸入元件是如何實現滾動到一側，而不必滾動條的能力？我不希望div元素擴展爲多行來容納內容，但我沒有看到任何CSS屬性控制輸入元素上的這種行爲。

更新：所有不錯的解決方案。謝謝你們的關注。看起來，輸入元素的某些方面是由瀏覽器控制的（即突出顯示到滾動）。在不使用Javascript的情況下仿效此功能似乎很難。我已將第一個答覆標記爲解決方案。

來源

2012-10-04 Sean Anderson

你有沒有嘗試設置「白色空間：NOWRAP;」在你的可編輯的裏面，並設置一個固定的高度和溢出：隱藏;在你的包裝？ – rafaelbiten

這裏的答案：http://jsfiddle.net/MRP5M/12/

有一點需要注意：我不知道如何禁止新線....

來源

2012-10-04 23:02:48 logan

使用此解決方案無法看到其餘內容。 –

我剛剛在Chrome上試過。您必須使用箭頭鍵才能查看其餘內容，就像輸入元素一樣。 – logan

雖然我可以使用輸入元素來突出顯示並滾動查看其餘內容。也許只是當時DIV元素的限制？ –

您可以設置「白色空間：NOWRAP;」在你的.editable div
之後，只需爲你的#wrapper（類似於20px）和overflow：hidden;

這將工作，因爲我只是試過。「white-space：nowrap」將避免任何換行符，因此您無需在可編輯div中設置固定寬度。

更新：至於用鼠標選擇所有文本的選項，Alohci在本文的評論中指出，您可以添加「overflow：auto;」到你可編輯的div，它會像通緝那樣行事，至少在Chrome上，我剛剛嘗試過。 Alohci還指出了小提琴。給他的信用。

來源

2012-10-04 23:06:14 rafaelbiten

似乎與Logans有相同的警告。看起來，輸入元素的一些特徵是由瀏覽器賦予的，不能在沒有javascript的情況下被複制？ –

是的......據我所知，你將無法用DIV專用的解決方案達到目的...爲什麼不簡單地使用另一個輸入字段呢？ – rafaelbiten

是的。看起來我會像我的div元素那樣設置輸入元素的樣式，而不是其他方式。在這一點上，只是將問題留在學習練習中。 –

輸入字段的方面和行爲是由瀏覽器本身控制的。您可以使用CSS來防止文本中斷：

看到這個working Fiddle example！

.editable { 
    white-space: nowrap; 
}

由於無需使用滾動條滾動，你只能無論是使用JavaScript或改變HTML實現爲具有input僞裝成div：

看到這個working Fiddle example！

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-04 23:10:08 Zuul

使DIV元素包含類似於輸入元素的文本？

回答

相關問題