Question

我有一个textarea的width:100%，但我的textarea默认会一直延伸到页面的边框。无论如何要解决这个问题吗？

我尝试将此响应变为响应，以便textarea的最大宽度为cols="100"，但如果需要，它也会缩小。

＆＃13;

textarea {
   	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	resize: none;
    }

＆＃13;

<textarea cols="100" rows="10" name="savetext" id="savetext"></textarea>

＆＃13;

Answer 1

尝试使用width: 400px;（px）代替％，我建议使用＆＃39; class＆＃39;或者＆＃39; id＆＃39;在html元素中，而不是为html元素全局写样式

示例：

<style>
.textarea{
 width:300px;
 height: 150px;
}
</style>

<textarea rows="3" cols="50" class="textarea"></textarea>

Answer 2

使用此css

textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 61%;
    resize: none;
    }

Answer 3

如果不支持CSS，则使用rows / cols;如果在CSS中指定宽度或高度，它们将覆盖从rows / cols派生的值。

Answer 4

您希望它为cols="100"，但您也希望它在视口变小时缩小。

使用width: 100%代替cols（将覆盖max-width: 100%属性）。 textarea最大宽度将是其指定的列值，如果需要，它也将缩小。

＆＃13;

textarea {
  resize: none;
  max-width: 100%;
  box-sizing: border-box;
}

＆＃13;

<textarea cols="100"></textarea>

＆＃13;