白空间有没有替代品:nowrap

时间:2018-03-02 06:43:34

标签: jquery html css

我正在使用带有<!----- HTML -----> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="info"> <input id="A" name="A" type="hidden" nodetype="parent" value="A"/> <input id="A1" name="A1" type="text" nodetype="child" value="a1val"/> <input id="A2" name="A2" type="text" nodetype="child" value="a2val"/> <input id="B" name="B" type="hidden" nodetype="parent" value="B"/> <input id="B1" name="B1" type="text" nodetype="child" value="b1val"/> <input id="B2" name="B2" type="text" nodetype="child" value="b2val"/> </form>的textarea,这样可以正常工作并删除空格,但这会将水平滚动条添加到文本中。 我不想要水平滚动条。如果我使用white-space:nowrap滚动条是不可见的,但是通过箭头键我可以滚动。 我希望文本区域的固定宽度在该宽度之后,数据应该到达下一行,文本区域也应该删除多余的空格而不是水平滚动 如何实现这个目标?

1 个答案:

答案 0 :(得分:1)

您正在寻找white-space:pre-linewhite-space:normal

&#13;
&#13;
textarea { 
   width:100%;
   height:200px;
}
.normal {
   white-space:normal;
}
.pre-line {
   white-space:pre-line;
}
&#13;
<textarea class="normal">Lorem ipsum    dolor    sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</textarea>

<textarea class="pre-line">Lorem ipsum    dolor    sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</textarea>
&#13;
&#13;
&#13;