Home >Web Front-end >HTML Tutorial >How to make the textarea text area width and height width and height automatically adapt

How to make the textarea text area width and height width and height automatically adapt

php中世界最好的语言Original: 2018-02-09 09:51:239365browse

This time I will bring you how to automatically adapt the width and height of the textarea text area to width and height. What are the precautions?. Here is the actual combat. Let’s take a look at the case.

<HTML>  
    <HEAD>  
    <TITLE>textarea宽度、高度自动适应处理方法</TITLE>  
    <!-- 控制宽度的自动适应 -->  
    <style type="text/css">  
    .comments {  
     width:100%;/*自动适应父布局宽度*/  
overflow
:auto;  
     
word-break
:break-all;  
    /*在ie中解决断行问题(防止自动变为在一行显示，主要解决ie兼容问题，ie8中当设宽度为100%时，文本域类容超过一行时，  
    当我们双击文本内容就会自动变为一行显示，所以只能用ie的专有断行
属性
“word-break或
word-wrap
”控制其断行)*/  
    }  
    </style>  
    </HEAD>  
    <BODY>  
    <FORM   METHOD=POST   
ACTION
= " ">  
    <!-- 主要控制高度的自动适应 -->  
    <!-- 第一个是普通textarea -->  
    <textarea class="comments" rows="10" cols="10"> </textarea>  
    <!-- 以下两种方式都可以解决textarea行高自动适应类容的高度 -->  
    <textarea class="comments" rows=1   name=s1   cols=27   onpropertychange= "this.style.posHeight=this.scrollHeight "></textarea>  
    <textarea class="comments" style="height:expression((this.scrollHeight>150)?&#39;150px&#39;:(this.scrollHeight+5)+&#39;px&#39;);overflow:auto;"></textarea>   
    </FORM>  
    </BODY>  
    </HTML>

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to make the textarea text area width and height width and height automatically adapt

Related articles