jquery - 空白 :nowrap 是否有任何替代方案

Question

我将 textarea 与 white-space:nowrap 一起使用，这可以正常工作并删除空格，但这会向文本添加水平滚动条。我不想要水平滚动条。如果我使用 overflow-x:hidden 滚动条是不可见的，但通过箭头键我可以滚动。我想在该宽度之后修复文本区域的宽度数据应该到达下一行并且文本区域也应该删除额外的空白并且没有水平滚动如何实现？

Answer 1

您正在寻找 white-space:pre-line 或 white-space:normal。

textarea { 
   width:100%;
   height:200px;
}
.normal {
   white-space:normal;
}
.pre-line {
   white-space:pre-line;
}

<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>