前台显示自动换行

在table中加入 style="WORD-WRAP: normal;TABLE-LAYOUT: fixed;word-break:normal"
总结如下:
word-wrap是控制换行的。
使用break-word时,是将强制换行。中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。

break-word是控制是否断词的。
normal是默认情况,英文单词不被拆开。
break-all,是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。
keep-all,是指Chinese, Japanese, and Korean不断词。即只用此时,不用word-wrap,中文就不会换行了。(英文语句正常。)


ie下:
使用word-wrap:break-word;所有的都正常。

ff下:
如这2个都不用的话,中文不会出任何问题。英文语句也不会出问题。但是,长串英文会出问题。
为了解决长串英文,一般用word-wrap:break-word;word-break:break-all;。但是,此方式会导致,普通的英文语句中的单词会被断开(ie下也是)。

目前主要的问题存在于 长串英文 和 英文单词被断开。其实长串英文就是一个比较长的单词而已。
即英文单词应不应该被断开那?那问题很明显了,显然不应该被断开了。
对于长串英文,就是恶意的东西,自然不用去管了。但是,也要想些办法,不让它把容器撑大。
用:overflow:auto; ie下,长串会自动折行。ff下,长串会被遮盖。


所以,综上,最好的方式是word-wrap:break-word;overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。
word-wrap:break-word;overflow:auto;在ie下没有任何问题。在ff下,长串会被遮住部分内容。



通过样式来实现

style="word-warp:break-word;word-break:break-all"
这两种只能解决文字自动换行
style="width:800;table-layout:fixed;"
图片自动换行,首先得通过样式控件表格宽度,唯一不足就是不能动态去改变宽度!
在实现 `<textarea>` 输入时支持回车换行的功能时,需注意浏览器默认行为和 JavaScript 事件处理的交互逻辑。默认情况下,`<textarea>` 元素在按下回车键时会插入换行符 `\n`,但在某些场景下,如事件监听中调用了 `event.preventDefault()`,会阻止默认的换行行为。 ### 实现 `<textarea>` 回车换行的方法 1. **直接使用默认行为** 在没有额外事件处理的情况下,`<textarea>` 会自动支持回车换行。例如: ```html <textarea rows="6" cols="50"></textarea> ``` 浏览器会在按下回车键时自动插入换行符 `\n`[^2]。 2. **手动插入换行符并保留光标位置** 如果在输入框中绑定了键盘事件(如 `onkeydown`),并且需要在按下回车键时插入换行符,则需要手动处理。可以通过获取光标位置并在该位置插入 `\n` 来实现换行: ```html <textarea id="myTextarea" rows="6" cols="50" onkeydown="handleEnter(event)"></textarea> ``` JavaScript 代码如下: ```javascript function handleEnter(event) { if (event.keyCode === 13) { event.preventDefault(); // 阻止默认换行行为 var textarea = document.getElementById("myTextarea"); var startPos = textarea.selectionStart; var endPos = textarea.selectionEnd; var value = textarea.value; textarea.value = value.substring(0, startPos) + "\n" + value.substring(endPos); textarea.selectionStart = textarea.selectionEnd = startPos + 1; } } ``` 此方法可以确保在光标位置插入换行符,而不会影响输入内容的结构[^2]。 3. **使用第三方库简化操作** 可以借助一些库(如 `cursor-position`)来更方便地获取和设置光标位置。例如: ```javascript var enter = function(id) { if (window.event.keyCode == 13) { var tx = document.getElementById(id); var pos = cursorPosition.get(tx); // 获取光标位置 cursorPosition.add(tx, pos, "\n"); // 在光标位置插入换行符 } }; ``` 该方法可以更精确地控制换行符的插入位置,适用于复杂的文本编辑场景[^2]。 4. **样式处理以确保换行显示正确** 在 `<textarea>` 中输入换行符后,如果需要在其他元素中显示这些换行符,可以使用 CSS 属性 `white-space` 或 JavaScript 替换 `\n` 为 `<br>` 标签。例如: ```css #articleDetail { white-space: pre-line; /* 保留换行符,自动换行 */ } ``` 或者使用 JavaScript 替换换行符: ```javascript var temp = $("#articleDetail").text().replace(/\n/g, "<br/>"); $("#articleDetail").html(temp); ``` 这样可以确保在前台显示时保留换行格式[^3]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

meteor_730

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值