HTML 标签的 wrap 属性</h1><div class="clear"></div><p class="post-meta"><span class="time"><i class="icon-time"></i>2023-08-23 10:32:40</span></p><div class="clear"></div></header><div class="entry" itemprop="articleBody"><h1>HTML <textarea> 标签的 wrap 属性</h1> <div> <h2>wrap 属性</h2> <p>通常情况下，当用户在输入文本区域中键入文本后，浏览器会将它们按照键入时的状态发送给服务器。只有用户按下 Enter 键的地方生成换行。</p> <p>如果您希望启动自动换行功能（word wrapping），请将 wrap 属性设置为 virtual 或 physical。当用户键入的一行文本长于文本区的宽度时，浏览器会自动将多余的文字挪到下一行，在文字中最近的那一点换行。</p> <p>wrap="virtual" 将实现文本区内的自动换行，以改善对用户的显示，但在传输给服务器时，文本只在用户按下 Enter 键的地方进行换行，其他地方没有换行的效果。</p> <p>wrap="physical" 将实现文本区内的自动换行，并以这种形式传送给服务器，就像用户真的那样键入的。因为文本要以用户在文本区内看到的效果传输给服务器，因为使用自动换行是非常有用的方法。</p> <p>如果把 wrap 设置为 off，将得到默认的动作。</p> </div> <div> <h2>例子</h2> <p>以下面这个例子为例,将 60 个字符的文本输入到一个 40 个字符宽的文本区域内：</p> <pre class="prettyprint linenums">word wrapping is a feature that makes life easier for users.</pre> <p>如果设置为 wrap="wrap"，文本区会包含一行文本，用户必须将光标移动到右边才能看到全部文本，这时将把一行文本传送给服务器。</p> <p>如果设置为 wrap="virtual"，文本区会包含两行文本，并在单词 "makes" 后面换行。但是只有一行文本被传送到服务器：没有嵌入新行字符。</p> <p>如果设置为 wrap="physical"，文本区会包含两行文本，并在单词 "makes" 后面换行，这时发送给服务器两行文本，单词 "makes" 后的新行字符将分隔这两行文本。</p> </div></div><footer class="entry-meta"><div class="clear"><div class="page-nav"></div></div><div class="gpost-below mobile-no"></div></footer><div class="post-navigation">上一篇：<a href="/manong/1510985.html">HDOJ(HDU).3466 Dividing coins ( DP 01背包 无后效性的理解)</a><p><br>下一篇：<a href="/manong/1510988.html">java.lang.IllegalArgumentException: Wrong FS ...异常的解决</a></p></div></article></div><section id="related-posts" class="widget-box"><h3>相关文章</h3><div class="widget-content"><ul><li class="other-news"><span>08-23</span><a href="/manong/1426417.html" title="HTML5中meta标签的属性有哪些？"><i class="icon-angle-right"></i>HTML5中meta标签的属性有哪些？</a></li><li class="other-news"><span>08-23</span><a href="/manong/1408007.html" title="四十：HTML5之HTML5标签变化之删除的标签和重定义的标签"><i class="icon-angle-right"></i>四十：HTML5之HTML5标签变化之删除的标签和重定义的标签</a></li><li class="other-news"><span>08-23</span><a href="/manong/1385819.html" title="JSTL的forEach标签中的属性具体含义"><i class="icon-angle-right"></i>JSTL的forEach标签中的属性具体含义</a></li><li class="other-news"><span>08-23</span><a href="/manong/1383962.html" title="浅析script 标签的 async 和 defer 属性"><i class="icon-angle-right"></i>浅析script 标签的 async 和 defer 属性</a></li><li class="other-news"><span>08-23</span><a href="/manong/1371532.html" title="QTP的那些事---通过html标签的属性获取对象（类似onclick的属性)"><i class="icon-angle-right"></i>QTP的那些事---通过html标签的属性获取对象（类似onclick的属性)</a></li><li class="other-news"><span>08-23</span><a href="/manong/1368689.html" title="去掉移动端页面 input, textarea, button, a 标签获取焦点时显示的黑影"><i class="icon-angle-right"></i>去掉移动端页面 input, textarea, button, a 标签获取焦点时显示的黑影</a></li><li class="other-news"><span>08-23</span><a href="/manong/1366039.html" title="34-10000 web入门 HTML5布局 （div标签使用）持续高强度的投入技术研发工作，才能创造大的价值！"><i class="icon-angle-right"></i>34-10000 web入门 HTML5布局 （div标签使用）持续高强度的投入技术研发工作，才能创造大的价值！</a></li><li class="other-news"><span>08-23</span><a href="/manong/1363218.html" title="HTML标签天天练7--表单4[textarea]到此 表单学习结束"><i class="icon-angle-right"></i>HTML标签天天练7--表单4[textarea]到此 表单学习结束</a></li><li class="other-news"><span>08-23</span><a href="/manong/1362465.html" title="018 关联映射文件中<class>标签中的lazy(懒加载)属性"><i class="icon-angle-right"></i>018 关联映射文件中<class>标签中的lazy(懒加载)属性</a></li><li class="other-news"><span>08-23</span><a href="/manong/1341024.html" title="两种清除html中标签的方法"><i class="icon-angle-right"></i>两种清除html中标签的方法</a></li></ul><div class="clear"></div></div></section></div><aside class="span4 sidebar-right hide-sidebar"><div id="posts-list-widget-9" class="widget-box widget widget-posts"><div class="widget-title"><span class="icon"><i class="icon-list"></i></span><h3>编程语言最新文章</h3></div><div class="widget-content"><li ><div class="widget-thumb"><i class="icon-angle-right"></i><a href="/manong/252095.html" title="阿里云峰会（上海）开发者大会五大分场演讲资料合辑开放下载啦！">阿里云峰会（上海）开发者大会五大分场演讲资料合辑开放下载啦！</a></div></li><li ><div class="widget-thumb"><i class="icon-angle-right"></i><a href="/manong/76851.html" title="2019阿里云双11活动拼团大促攻略">2019阿里云双11活动拼团大促攻略</a></div></li><li ><div class="widget-thumb"><i class="icon-angle-right"></i><a href="/manong/173772.html" title="免费下载！ 《OceanBase 社区版入门到实战》 快人一步，成为游刃有余的分布式数据库专家！">免费下载！ 《OceanBase 社区版入门到实战》 快人一步，成为游刃有余的分布式数据库专家！</a></div></li><li ><div class="widget-thumb"><i class="icon-angle-right"></i><a href="/manong/266089.html" title="独家下载 |《大数据工程师必读手册》揭秘阿里如何玩转大数据">独家下载 |《大数据工程师必读手册》揭秘阿里如何玩转大数据</a></div></li><li ><div class="widget-thumb"><i class="icon-angle-right"></i><a href="/manong/172433.html" title="区块链的那些事，你知道和不知道的都在这里！">区块链的那些事，你知道和不知道的都在这里！</a></div></li><li ><div class="widget-thumb"><i class="icon-angle-right"></i><a href="/manong/378357.html" title="开放下载！《OSS运维基础实战手册》">开放下载！《OSS运维基础实战手册》</a></div></li><li ><div class="widget-thumb"><i class="icon-angle-right"></i><a href="/manong/1771.html" title="Java线程池必备知识：核心参数、工作流、监控、调优手段">Java线程池必备知识：核心参数、工作流、监控、调优手段</a></div></li><li ><div class="widget-thumb"><i class="icon-angle-right"></i><a href="/manong/33262.html" title="通过阿里云APP，可以进行ECS，RDS 等实例的管理">通过阿里云APP，可以进行ECS，RDS 等实例的管理</a></div></li><li ><div class="widget-thumb"><i class="icon-angle-right"></i><a href="/manong/448439.html" title="【免费领取】阿里技术资料解密，100 本电子书找全了">【免费领取】阿里技术资料解密，100 本电子书找全了</a></div></li><div class="clear"></div></div></div></aside></div></div></div><footer id="footer" class="row-fluid" role="contentinfo" itemscope=""><div class="span12 footer-nav"><ul><li><a href="/zuixin/">更多编程技术文章</a></li><li><a href="/sitemap.xml">网站地图</a></li></ul></div><div class="span12 footer-info"><p>本站所有资源皆搜集自网络，相关版权归版权持有人所有，如有侵权，请电邮告之，本站会尽快删除。<span class="email-span"></span></p><p><a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备2022053706号</a></p></div></footer><div class="returnTop" title="" style="display: none;"><span class="s"></span><span class="b"></span>" </div><script type="text/javascript" src="/statics/553668/js/all.js"></script></body></html>