怎样写CSS设置多行文本框的显示行数？

Posted 2023-05-11

想设置多行文本框的显示行数，比如5行，怎么写CSS样式？

楼主你好!一般textarea 5行写法就是上面写的那个默认状态下:<textarea cols=5></textarea>
但楼主说要用css实现，其实也可以，方法代码如下:
<style type="text/css">
.areaclasswidth:200px;height:75px;line-height:15px;

</style>
<textarea class="areaclass">
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</textarea>
如果内容超过了五行的话,就会显示下拉滚动条!

参考资料：http://www.losever.com/?s=css%E6%A0%B7%E5%BC%8F

参考技术A <textarea rows=10 cols=5></textarea>
rows=10代表行数。 参考技术B <textarea cols=5></textarea>
cols指的行

多行文本溢出显示...的方法(-webkit-line-clamp)

限制在一个块元素显示的文本的行数。

-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

• display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
• -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
• text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。      

 

demo.html

<div class="li_title">得力/deli LED灯立体浮雕地球仪/标准教学 高清中英文对照 内显洋流图行政图地形图 送放大镜（ Φ 30cm）</div>

 

demo.css

.shop .li_title{
    width:100%;
    font-size:16px;
    line-height:20px;
    height: 40px;
    margin-bottom:40px;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp:2;    
    -webkit-box-orient: vertical;
}

 

效果图