2017-02-16 84 views
0

我想......請看一下SO回答框。這是我正在尋找的行爲 - 滾動條出現在文本溢出,但用戶可以手動調整它的大小。用戶可調整最大寬度/高度的分區

我的問題是,是否可以使用CSS本地執行此類操作? 使用我當前的設置,最初div很小(小於最大高度),我可以調整它的大小,但只能在當前文本高度和最大高度之間調整大小。當插入更多文本並出現滾動條時,我根本無法改變它的大小。

CSS

element.style { 
    resize: vertical; 
    max-height: 200px; 
    overflow: auto; 
    padding: 10px; 
} 

更準確地說我想下面的情況發生:

  • 如果文本的高度較小然後定義最大高度那麼,元件設置它的大小,需要的文字極小值完全可見(沒有滾動條)。 - 作品
  • 如果文本的高度超出了定義的最大高度,那麼元素將採用最大高度,並且會出現滾動條。 - 作品
  • 如果用戶不願意看到滾動條或者只是想一次看到更多文本,他可以將元素大小調整到任意所需的高度,而最大高度會將該新高度作爲值。 - 不起作用,用戶無法調整超過最大高度。

寫JS比編寫這個問題可能會更快,但我希望這有靜態html頁面的這種行爲。

回答

1

這是你正在尋找的造型嗎?
例如:

#element { 
 
    resize: vertical; 
 
    height: auto; 
 
    min-height:200px; 
 
    resize: vertical; 
 
    overflow: auto; 
 
    padding: 10px; 
 
    width: 95%; 
 
    border:1px solid; 
 
}
<textarea id="element"> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt, turpis eu aliquam aliquet, justo mi lobortis nibh, dictum sodales nunc quam non ipsum. Ut condimentum dui vel consectetur faucibus. Duis eu purus et massa ultricies blandit vel non felis. Morbi ut metus interdum, blandit mauris ac, vestibulum lorem. Etiam aliquam tincidunt magna, et ullamcorper enim pulvinar et. Aenean et auctor turpis, sed posuere eros. Integer magna lacus, accumsan sit amet hendrerit a, sagittis sed ipsum. Fusce leo neque, sollicitudin vel lectus eget, maximus cursus felis. Pellentesque rutrum volutpat enim, quis semper diam semper ac. Mauris ultrices molestie maximus. Vivamus feugiat posuere ultrices. Quisque blandit, lacus sed tempor ullamcorper, nunc ligula iaculis felis, ut eleifend mauris lacus a tortor. Fusce at cursus orci, at posuere nisi. In vel suscipit eros, eget cursus lacus. 
 
Aenean ut neque sit amet orci gravida volutpat. Etiam vehicula nec augue ut vulputate. Integer fermentum est id leo mollis, quis accumsan quam commodo. Vivamus varius nibh turpis, ac tincidunt dolor consectetur non. Aliquam aliquam scelerisque orci sit amet posuere. Vivamus blandit quis ante vitae consectetur. Aliquam semper eros eu odio porttitor sollicitudin. Donec id mollis arcu. Etiam tortor est, dignissim sagittis lorem non, auctor commodo velit. Nulla facilisi. Morbi ultrices eleifend urna sit amet suscipit. Maecenas augue ante, lobortis at justo sit amet, malesuada faucibus justo. Nulla sit amet lorem in felis convallis feugiat ac fringilla urna. Vivamus finibus aliquam auctor. Fusce ante tortor, tempor id elit eget, sodales ultrices quam. 
 
</textarea>

+0

但問題是,我想有初始最大高度。 –

+0

我有更新的問題。希望現在清楚我想要什麼。 –

相關問題