我想...好看看SO答案框。那就是我要寻找的行为-滚动条出现在文本溢出时,但用户可以手动调整其大小。
我的问题是,是否有可能用CSS来做这种事情?
在当前设置下,div最初很小(小于max-height),我可以调整其大小,但只能在当前文本的高度和max-height之间调整。当插入更多文本并出现滚动条时,我根本无法更改其大小。
的CSS
element.style {
resize: vertical;
max-height: 200px;
overflow: auto;
padding: 10px;
}
更准确地说,我希望发生以下情况:
如果文本的高度较小,则定义max-height,然后元素将其大小设置为使文本完全可见(没有滚动条)所需的最小值。 -作品
如果文本的高度超过定义的最大高度,则元素将采用最大高度,并出现滚动条。 -作品
如果用户不想看到滚动条,或者只是想一次看到更多文本,则可以将元素的大小调整为任意所需的高度,并且max-height将采用新的高度作为其值。 -不起作用,用户无法调整最大高度。
写JS可能比写这个问题要快,但是我希望静态html页面具有这种行为。
最佳答案
这是您要寻找的样式吗?
例如:
#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>