天道酬勤,学无止境

在CSS / JS中自动换行(word wrap in css / js)

问题

我正在寻找一种跨浏览器的方式来包装具有预定宽度的div内不包含空格(例如长URL)的文本的较长部分。

这里有一些解决方案,我在网络上找到,为什么他们为我工作:

  • 溢出:隐藏/自动/滚动-我需要整个文本在不滚动的情况下可见。 div可以垂直增长,但不能水平增长。
  • 注射­ 通过js /服务器端输入字符串-­ FF3现在支持FF3,但是复制和粘贴带有­的URL。 在中间无法在Safari中使用。 另外,据我所知,没有一种干净的方法来测量文本宽度,以找出最佳的字符串偏移量以将这些字符添加到其中(这是一种怪癖,请参阅下一项)。 另一个问题是,放大Firefox和Opera可以轻松解决这个问题。
  • 将文本转储到隐藏元素中并测量offsetWidth-与上面的项目有关,它需要在字符串中添加额外的字符。 同样,测量一长段文本所需的中断数量可能很容易需要数千个昂贵的DOM插入(每个子字符串长度一个),这可以有效地冻结该站点。
  • 使用等宽字体-再次,缩放会弄乱宽度计算,并且文本无法随意设置样式。

看起来很有希望但还不存在的事情

  • word-wrap:断行词-它现在是CSS3工作草案的一部分,但Firefox,Opera或Safari尚不支持。 如果它今天可以在所有浏览器中使用,那么这将是理想的解决方案:(
  • 通过js /服务器端将<wbr>标记注入字符串中-复制和粘贴URL在所有浏览器中都可以使用,但是我仍然没有衡量中断位置的好方法。 另外,此标记会使HTML无效。
  • 在每个字符后添加换行符-比数千个DOM插入好,但还是不理想(将DOM元素添加到文档中会占用内存并减慢选择器查询的速度)。

有谁对如何解决这个问题有更多的想法?

回答1

CSS哟!

.wordwrap {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */ 
}

我也刚刚发现这篇文章http://www.impressivewebs.com/word-wrap-css3/

所以你应该使用

.wordwrap {  
    word-wrap: break-word;
}  

.no_wordwrap {  
    word-wrap: normal;
}  
回答2

我通常使用word-wrap<wbr>想法的组合来处理此问题。 请注意,有一些变体。 如您所见, &#8203; 兼容性可能是您最好的选择。

word-wrap浏览器的支持并不可怕,考虑到所有因素,Safari,Internet Explorer和Firefox 3.1(Alpha Build)都支持它(src),所以我们可能相距不远。

关于服务器端损坏,我已经非常成功地使用了此方法(php):

function _wordwrap($text)   {
    $split = explode(" ", $text);
    foreach($split as $key=>$value)   {
        if (strlen($value) > 10)    {
            $split[$key] = chunk_split($value, 5, "&#8203;");
        }
    }
    return implode(" ", $split);
}

基本上,对于超过10个字符的单词,我将其分成5个字符。 这似乎适用于我已经处理过的所有用例。

回答3

此处存在一个松散相关的问题,宽度为100%的textarea忽略了IE7中父元素的宽度

不知道是否找到任何确定性的解决方案,但似乎最接近的是word-break:break-all ,它可能在Internet Exploder中起作用。

我还在书签中找到了这个http://petesbloggerama.blogspot.com/2007/02/firefox-ie-word-wrap-word-break-tables.html,这表明大多数其他浏览器都可以解决,帮助。

如果CSS3出现在这里,那将是很棒的...

希望对您有所帮助,将有兴趣了解您的想法。 抱歉,我无法提供经过测试或更具体的内容。

回答4

在PHP中使用正则表达式可以更快地分解长单词。 我创建了一个处理htmlspecialchars并使用&shy;分解单词的函数。 这是任何有兴趣的人的功能。 只需传递字符串和最大单词长度(如果您不希望使用&shy;分解单词,则保留为0),它将返回一个字符串,其中包含转换的html特殊字符和使用&shy;分解的单词。

function htmlspecialchars2($string = "", $maxWordLength = 0)
{
    if($maxWordLength > 0)
    {
        $pattern = '/(\S{'.$maxWordLength.',}?)/';
        $replacement = '$1&shy;';
        $string = preg_replace($pattern, $replacement, $string);
    }

    //now encode special chars but dont encode &shy;
    $string = preg_replace(array('/\&(?!shy\;)/','/\"/',"/\'/",'/\</','/\>/'), array('&amp;','&quot;','&#039;','&lt;','&gt;'), $string);

    return $string;
}
回答5

您可以使用表格布局+自动换行CSS属性,该属性现在可以在IE7-8和FF3.5中使用。 它不会解决问题,但至少不会破坏您的设计。

回答6

如果需要根据组件的高度和宽度自动换行文本以显示希望在css中使用,请在CSS中使用white-space:normal

回答7

与Owen的答案非常相似,这可以在一行中在服务器端实现相同的功能:

return preg_replace_callback( '/\w{10,}/', create_function( '$matches', 'return chunk_split( $matches[0], 5, "&#8203;" );' ), $value );
回答8

这可以解决您的问题

function htmlspecialchars2($string = "", $maxWordLength = 0){
 return  wordwrap($string , $maxWordLength,"\n", true);
 }
标签

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 自动换行(wordwrap a very long string)
    问题 如何显示带有自动换行符的长字符串,网站地址,单词或符号集,以保持div宽度? 我猜是一个自动换行。 通常添加空格是可行的,但是有CSS解决方案,例如自动换行吗? 例如,它(非常讨厌)与div重叠,强制水平滚动等。 我可以在上面的字符串中添加些什么以使其完全适合div中的几行或浏览器窗口? 回答1 之前曾在这里问过这个问题: 谁解决了我的div-break-breaks-my-div问题? (提示:不是stackoverflow) 在CSS / JS中自动换行 CSS:如何强制将长字符串(不带任何空格)包裹在XUL和/或HTML中带有长网址的CSS溢出 长话短说: 至于CSS的解决方案去了你就必须: overflow: scroll; 强制元素显示滚动条并overflow:hidden; 剪掉任何多余的文字。 有text-overflow:ellipsis; 和word-wrap: break-word; 但它们仅是IE(但是CSS3草案中包含了break-word ,因此从现在起这将是这5年的解决方案)。 底线是,如果对您来说非常重要,请不要将文本换行到下一行,以免发生这种情况,唯一合理的解决方案是注入­ (软连字符),<wbr>(分词标签)或&#8203; (零宽度空格,与­减连字符相同的效果)在您的字符串服务器端。 但是,如果您不介意使用Javascript
  • 如何防止冗长的单词打断我的div?(How to prevent long words from breaking my div?)
    问题 从TABLE布局切换到DIV布局以来,一个普遍的问题仍然存在: 问题:您用动态文本填充DIV,并且不可避免地会有一个超长单词延伸到div列的边缘,使您的网站看起来不专业。 RETRO-WHINING :表格布局从未发生过这种情况。 一个表格单元格总是可以很好地扩展到最长单词的宽度。 严重性:我什至在大多数主要站点上都遇到了这个问题,尤其是在德国站点上,这些站点甚至连“限速”之类的通用词都非常长(“ Geschwindigkeitsbegrenzung”)。 有人对此有可行的解决方案吗? 回答1 软连字符 您可以通过插入软连字符( ­ )来告诉浏览器在哪里拆分长字: averyvery­longword 可能被渲染为 veryverylongword 或者 每个- 长字 一个好的正则表达式可以确保除非必要,否则不会插入它们: /([^\s-]{5})([^\s-]{5})/ → $1­$2 浏览器和搜索引擎足够聪明,可以在搜索文本时忽略该字符,而Chrome和Firefox(尚未测试其他字符)在将文本复制到剪贴板时会忽略该字符。 <wbr>元素 另一个选择是注入<wbr> ,它是以前的IE-ism,现在已在HTML5中使用: averyvery<wbr>longword 不带连字符的换行符: 每个长字 您可以使用零宽度空格字符​来实现相同的功能​ (或&#x200B )。
  • 如何在预标签中包装文字?(How do I wrap text in a pre tag?)
    问题 pre标记对于HTML中的代码块和编写脚本时调试输出非常有用,但是如何使文本自动换行而不是打印长行呢? 回答1 答案,来自此页面的CSS: pre { white-space: pre-wrap; /* Since CSS 2.1 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } 回答2 这对于在pre标签内包装文本和保持空白非常有用: pre { white-space: pre-wrap; } 回答3 我发现跳过pre标签并使用空格:在div上进行预包装是更好的解决方案。 <div style="white-space: pre-wrap;">content</div> 回答4 最简洁地说,这迫使内容包装在“ pre”标签内而不会打断单词。 干杯! pre { white-space: pre-wrap; word-break: keep-all } 回答5 这就是我所需要的。 它可以防止单词断断续续,但可以保留前置区域中的动态宽度。 word
  • 使用jQuery自动扩展文本区域(Auto expand a textarea using jQuery)
    问题 如何使用jQuery使文本区域自动扩展? 我有一个用于解释会议议程的文本框,因此当我的议程文本持续增长该文本框区域时,我想扩展该文本框。 回答1 我已经尝试了很多,这是很棒的。 链接已死。 此处有较新的版本。 参见下面的旧版本。 您可以通过在文本区域中按住Enter键来尝试。 将效果与其他自动扩展的textarea插件进行比较。... 根据评论进行编辑 $(function() { $('#txtMeetingAgenda').autogrow(); }); 注意:您应该包括所需的js文件... 为了防止文本区域中的滚动条在扩展/收缩过程中闪烁,您还可以将overflow设置为hidden : $('#textMeetingAgenda').css('overflow', 'hidden').autogrow() 更新: 上面的链接已断开。 但是您仍然可以在此处获取javascript文件。 回答2 如果您不想要插件,那么有一个非常简单的解决方案 $("textarea").keyup(function(e) { while($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css(
  • 如何在jqgrid中将单列标题文本包装为多行(How to wrap single column header text into multiple lines in jqgrid)
    问题 如果列标签文本的宽度大于列宽度,则标签文本将被截断。 由于某些文本很长,因此增加列宽不是很好。 如何使文字自动换行成多行? 标头高度应由最大列高度决定。 我发现的唯一解决方案是 jQgrid:多个列行标题 但这不会实现文字自动换行。 如何实现标题文本的自动换行? 更新。 我尝试了Oleg样式的字符和自动换行。 角色换行 th.ui-th-column div{ word-wrap: break-word; /* IE 5.5+ and CSS3 */ white-space: pre-wrap; /* CSS3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ overflow: hidden; height: auto; vertical-align: middle; padding-top: 3px; padding-bottom: 3px } 仅显示第二行的一半。 第三行根本没有显示: 自动换行 th.ui-th-column div{ white-space:normal !important; height:auto !important
  • CSS中的“断字:全部”和“换行:断字”之间有什么区别(What is the difference between “word-break: break-all” versus “word-wrap: break-word” in CSS)
    问题 我目前想知道两者之间有什么区别。 当我使用两者时,如果它不适合容器,它们似乎会打乱这个词。 但是,为什么W3C有两种方法可以做到这一点? 回答1 讨论这些问题的W3规范似乎暗示了word-break: break-all是为了要求CJK(中文,日文和韩文)文本具有特定的行为,而word-wrap: break-word是更普遍的,非-CJK意识,行为。 回答2 word-wrap: break-word最近更改为overflow-wrap: break-word 会将长字换行到下一行。 调整不同的单词,以使它们不会在中间中断。 word-break: break-all 不管是连续单词还是很多单词,都应在宽度限制的边缘将其分解。 (即,即使在同一单词的字符内) 因此,如果您有许多固定大小的跨度可以动态获取内容,那么您可能更喜欢使用word-wrap: break-word ,因为那样word-wrap: break-word ,只有连续的单词在中间被打断,如果句子中包含很多单词,调整空格以获得完整的单词(单词内不间断)。 如果没关系,那就选择其中之一。 回答3 使用分word-break ,很长的单词会从它应该开始的点开始,并且只要需要就被打断 [X] I am a text that 0123 4567890123456789012345678 90123456789
  • CSS文字溢出:省略号; 不工作吗?(CSS text-overflow: ellipsis; not working?)
    问题 我不知道为什么这个简单的CSS无法正常工作... .app a { height: 18px; width: 140px; padding: 0; overflow: hidden; position: relative; margin: 0 5px 0 5px; text-align: center; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; color: #000; } <div class="app"> <a href="">Test Test Test Test Test Test</a> </div> 应该切断第4次“测试” 回答1 text-overflow:ellipsis; 仅当满足以下条件时才有效: 元素的宽度必须限制为px (像素)。 以% (百分比)为单位的宽度无效。 元素必须设置了overflow:hidden和white-space:nowrap 。 你在这里有问题的原因是因为width你的a元素没有限制。 您确实有一个width设置,但是因为该元素设置为display:inline (即默认值),所以它忽略了它,并且也没有其他限制它的宽度的方法。 您可以通过执行以下任一操作来解决此问题: 将元素设置为display:inline
  • 用CSS打破长篇大论(Break long word with CSS)
    问题 我遇到的情况是,可能有很长的单词(如“ hellowordsometext”)或整数(如“ 1234567891122”)之间没有任何空格。 请检查此js。 http://jsfiddle.net/rzq5e/6/ 达到div宽度后,如何将其分成下一行。 现在发生的是,它与div一起扩展 <div>Solutionforentprise</div> 回答1 您需要的是word-wrap: break-word; ,此属性将强制使无间距的字符串在div内中断 演示版 div { width: 20px; word-wrap: break-word; } 回答2 我已经找到了解决方案。 word-break: break-all; 但不适用于Opera。 http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-break 回答3 给你的div一个ID或类 然后 #divid { width: 30px; word-wrap: break-word; } IE 5.5 +,Firefox 3.5+和WebKit浏览器(例如Chrome和Safari,Opera 10.5+)均支持自动换行。 回答4 固定DIV的大小并应用“溢出:隐藏”,这样就不会完全影响网格大小。 div{width: 40px
  • 有没有一种方法可以将div中的长单词换行?(Is there a way to word-wrap long words in a div?)
    问题 我知道Internet Explorer具有自动换行样式,但是我想知道是否有跨浏览器的方法可以对div中的文本进行这种操作。 最好是CSS,但JavaScript代码片段也可以正常工作。 编辑:是的,指的是长长的弦,为人们加油! 回答1 卢瑟福在阅读原始评论时,正在寻找一种跨浏览器的方式来包装完整文本(由他对IE使用自动换行(旨在破坏完整字符串的推断)推断)。 /* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */ .wordwrap { white-space: pre-wrap; /* CSS3 */ white-space: -moz-pre-wrap; /* Firefox */ white-space: -pre-wrap; /* Opera <7 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* IE */ } 我现在已经使用了这一堂课,并且像一个咒语一样工作。 (注意:我仅在FireFox和IE中进行过测试) 回答2 在Firefox 38.0.5中,大多数以前的答案对我不起作用。 做到了... <div style='padding: 3px; width: 130px; word
  • 通过javascript检测浏览器换行(Detect browser wrapped lines via javascript)
    问题 我需要javascript来检测每个浏览器的换行文本,并将其换成<span class="line"> 。 我碰到过有关测量每个单词的y轴的文章,但还没有一个可靠的解决方案。 到目前为止,这就是我所拥有的。 在Jsfiddle上查看。 的HTML <div class="inline-bg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus condimentum metus, et placerat augue rutrum vitae. Donec arcu lorem, eleifend at elementum eget, consectetur vel lacus. Nam euismod iaculis varius. Phasellus sed dui diam. Nullam facilisis, diam sit amet sagittis cursus, metus tortor gravida erat, ut fringilla risus ipsum eu nisl.</div>​ JS / jQuery (function($){ $.fn.inlinebackground = function() { $.each(this, function(i,t) {
  • 如何在DIV中强行换行?(How to force a line break in a long word in a DIV?)
    问题 好吧,这真的让我感到困惑。 我在div中有一些内容,例如: <div style="background-color: green; width: 200px; height: 300px;"> Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest. </div> 但是,由于“单词”太长,内容溢出了DIV(如预期的那样)。 如何在必要时强制浏览器“破坏”单词以适合其中的所有内容? 回答1 使用自动换行:break-word; 它甚至可以在IE6中使用,这真是令人惊喜。 word-wrap: break-word已被溢出换行:断行; 在所有现代浏览器中均可使用。 IE,浏览器已经停滞不前,它将永远依赖不推荐使用的非标准word-wrap 。 如今, word-wrap仍然有效,因为按照规范,它是overflow-wrap的别名。 回答2 我不确定浏览器的兼容性 word-break: break-all; 您也可以使用<wbr>标签 <wbr> (分行<wbr> )的意思是:“浏览器可以根据需要在此处插入换行符。” 如果浏览器认为不需要换行,则什么也不会发生。 回答3 可以将其添加到“跨浏览器”解决方案的公认答案中。 资料来源: http://kenneth.io/blog/2012/03
  • 溢出包装和断字之间的区别?(Difference between overflow-wrap and word-break?)
    问题 overflow-wrap / word-wrap和word-break word-wrap之间的确切区别是什么? 有人可以告诉我打破长链接的更好的方法吗? 大多数人说您应该将断字与overflow-wrap结合使用,但是看起来并不合逻辑。 我认为结合使用overflow-wrap和word-wrap以获得更好的跨浏览器支持是最好的方法。 你怎么看? 回答1 从源报价 自动换行:自动换行CSS属性用于指定浏览器是否可以在单词内换行,以防止在其他情况下坚不可摧的字符串太长而无法容纳其包含框时溢出。 overflow-wrap:在CSS3 Text规范的当前草案中word-wrap属性已重命名为overflow-wrap 断字:断字CSS属性用于指定如何(或是否)在字内断行 因此,您需要将断行与自动换行结合使用,这是正确的组合。 回答2 这有助于理解word-break: break-word实际上是overflow-wrap: anywhere的别名。 word-break: break-word已被正式弃用; 请参阅CSS文本模块第3级工作草案: 为了与旧内容兼容, word-break属性还支持不建议使用的break-word关键字。 指定时,这与word-break: normal和overflow-wrap: anywhere效果相同,而与overflow
  • 寻找换行(Finding line-wraps)
    问题 假设我在一行中有一些随机的文本块。 像这样 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 但是无论出于何种原因(包含元素的宽度设置,使用文本缩放等),在查看器的屏幕上它都显示为两行或更多行。 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 或者 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 有没有办法通过javascript找出发生换行的地方? $('p').text()和$('p').html()返回Lorem ipsum dolor sit amet, consectetur adipiscing elit. 不管文本如何显示。 回答1 好吧,如果您想要的东西简直太简单了,可能对您来说太没用了(如果您在段落中包含任何种类的HTML,则需要进行重大修改),然后看一下: var para = $('p'); para.each(function(){ var current = $(this); var text = current.text(); var words = text.split(' '); current.text(words[0]); var height =
  • 创建具有自动调整大小的文本区域(Creating a textarea with auto-resize)
    问题 关于此,我尝试了另一个线程。 但是有一个问题:如果删除内容, textarea不会缩小。 我找不到任何将其缩小到正确大小的方法clientHeight值以textarea的完整大小(而不是其内容)返回。 该页面上的代码如下: function FitToContent(id, maxHeight) { var text = id && id.style ? id : document.getElementById(id); if ( !text ) return; var adjustedHeight = text.clientHeight; if ( !maxHeight || maxHeight > adjustedHeight ) { adjustedHeight = Math.max(text.scrollHeight, adjustedHeight); if ( maxHeight ) adjustedHeight = Math.min(maxHeight, adjustedHeight); if ( adjustedHeight > text.clientHeight ) text.style.height = adjustedHeight + "px"; } } window.onload = function() { document
  • css中设置table中的td内容自动换行
    今天碰到了table表格中td内的非中文内容在设置固定大小后会被撑开的问题(中文会自动换行),然后特意百度了下发现一般字母的话会被浏览器默认是一个字符串或者说一个单词,所以不会自动换行需找了解决方法 1.在<td>中设置样式style为word-wrap:break-word;word-break:break-all;(一般情况只需要设置word-break:break-all即可,但是有时候需要加word-wrap:break-word ) 2.把表格的sytle的table-layout:fixed,就是表格固定宽度,就是表格即要自适应他外面的容器,也不要撑出去,然后设置td的word-wrap:break-word;换行,问题就解决了来源:https://blog.51cto.com/chenhuixfyy/1030521
  • 宽度等于内容[重复](Width equal to content [duplicate])
    问题 这个问题已经在这里有了答案: 如何使div不大于其内容? (40个答案) 10个月前关闭。 我在CSS的width属性上遇到了一些麻烦。 我在div中有一些段落。 我想使段落的宽度等于它们的内容,以使它们的绿色背景看起来像文本的标签。 相反,我得到的是这些段落继承了div父节点的宽度,该宽度更宽。 #container { width: 30%; background-color: grey; } #container p { background-color: green; } <div id="container"> <p>Sample Text 1</p> <p>Sample Text 2</p> <p>Sample Text 3</p> </div> 回答1 默认情况下, p标签是block元素,这意味着它们占用父width 100%。 您可以使用以下方法更改其显示属性: #container p { display:inline-block; } 但这将元素并排放置。 要使每个元素保持独立行,可以使用: #container p { clear:both; float:left; } (如果您使用float并需要在float元素后清除,请参阅此链接以了解不同的技术:http://css-tricks.com/all-about-floats/) 演示: http :
  • HTML表中的自动换行(Word-wrap in an HTML table)
    问题 我一直在使用word-wrap: break-word将文本div和span 。 但是,它似乎在表单元格中不起作用。 我有一个表设置为width:100% ,有一行和两列。 列中的文本尽管使用上述word-wrap样式设置,但不会自动换行。 它导致文本超出单元格的边界。 在Firefox,Google Chrome和Internet Explorer上会发生这种情况。 来源如下所示: td { border: 1px solid; } <table style="width: 100%;"> <tr> <td> <div style="word-wrap: break-word;"> Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word </div> </td> <td><span style="display: inline;">Short word</span></td> </tr> </table> 上面的长字比我页面的边界大
  • 根据输入到字段中的字符数动态扩展输入类型“文本”的高度(Dynamically expand height of input type “text” based on number of characters typed into field)
    问题 类似于下面的JSFiddle(我将其添加为书签,并且不知道原始问题来自何处): http://jsfiddle.net/mJMpw/6/ <input type="text" value="" placeholder="Autosize" data-autosize-input='{ "space": 10 }' /> input { width: 200px; min-width: 200px; max-width: 300px; transition: width 0.25s; } 有没有一种方法可以将文本字段的宽度固定为例如200px,如果用户添加的文本超过200px可以容纳的文本的高度,文本字段的高度是否会增加? 如果用户需要更多的空间来键入内容,我希望添加更多的行...因此,我需要height而不是width来动态调整大小。 谢谢! 回答1 正如其他人所解释的那样, input字段不能包含多行文本,您应该使用textarea模仿输入字段,并使用jQuery使其垂直自动调整大小(具有固定宽度)。 JS : //This span is used to measure the size of the textarea //it should have the same font and text with the textarea and should be
  • vue 保存自动格式化, html自动缩进 双引号变为单引号 注释加空格 html标签属性设置不换行 亲测有效!
    设置vscode自动格式化 开启语法检查(安装ESLint,检查语法保证代码的规范性)安装Vetur插件打开vscode的setting.json文件(文件–>首选项–>输入vetur搜索,往下找到在setting.json文件中编辑)将如下代码复制到setting.json文件中覆盖 // setting.js { // "workbench.iconTheme": "vscode-icons", "editor.formatOnSave": true, "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "auto" }, "prettyhtml": { "printWidth": 100, "singleQuote": false, "wrapAttributes": false, "sortAttributes": false }, "prettier": { "semi": false, "singleQuote": true } }, "workbench.editor.enablePreview": false, "vetur
  • 在文字换行的阿拉伯区域中找到“换行符”(finding “line-breaks” in textarea that is word-wrapping ARABIC text)
    问题 我有一个在文本区域(从右到左方向)显示的文本字符串。 用户可以动态调整textarea的大小(为此我使用jquery),并且文本将根据需要自动换行。 当用户点击“提交”时,我将使用该文本并使用PHP,BUT创建图像,然后再提交,我想知道“换行符”或“自动换行”发生的位置。 到目前为止,我所看到的所有地方仅向我展示了如何在php端处理换行符。 我想明确地说,没有线路中断。 我所拥有的是一个长字符串,它将根据用户设置的文本区域的宽度以不同的方式进行文字换行。 我不能使用“列”或任何其他标准宽度表示形式,因为我有一个非常复杂的阿拉伯字体,实际上是由许多不同宽度的字形(字符)组成的。 如果有人知道访问自动换行的位置的方式(如果需要,可以在textarea或div中),我真的很想知道。 我唯一的其他解决方案是实际存储每个字符的宽度(在我的数据库中)(这有点乏味,因为在600种不同的字体中有200多个字符,总共……有些庞大)。 我的希望不高,但我想我会问。 谢谢 一世。 贾马尔 回答1 好吧,除了找到换行符(实际上是不可能的)之外,您还可以使用以下功能将其强制进入文本区域: function ApplyLineBreaks(strTextAreaId) { var oTextarea = document.getElementById(strTextAreaId); if