关键词：
【中文标题】无法在 iframe 文本编辑器中使用自动换行【英文标题】：Can't get word wrap to work in an iframe text editor 【发布时间】：2014-07-20 09:03:30 【问题描述】：Fiddle Example
我在编辑器中添加了可调整大小的 jQueryUI，但我无法让自动换行功能正常工作。谁能告诉我如何使用 word-wrap: break-word; 以便在单词之间没有空格时自动换行。
我尝试过#textEditor word-wrap: break-word; 或#textEditor body word-wrap: break-word;，但它们都不起作用。
<a id="bold" class="font-bold">B</a> <a id="italic" class="italic">I</a> <select id="fonts">
<option value="Arial">Arial</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="Monotype Corsiva">Monotype</option>
<option value="Tahoma">Tahoma</option>
<option value="Times">Times</option>
</select>
<br/>
<div id="iframewrapper">
<iframe id="textEditor"></iframe>
</div>
CSS：
#textEditor word-wrap: break-word;
.ui-resizable-helper border: 1px dotted gray;
.iframewrapper display: block; width: 100px; height: 400px; padding: 30px; border: 2px solid gray; overflow: hidden; position: relative;word-wrap: break-word;
.font-bold
padding:0px 10px 0px 10px;
font-weight:bold;
.italic
padding:0px 10px 0px 10px;
font-style:italic;
.selected
background-color: orange;
jQuery 脚本：
$("#iframewrapper").resizable(
alsoResize : '#textEditor'
);
$(document).ready(function()
document.getElementById('textEditor').contentWindow. document.designMode="on";
document.getElementById('textEditor').contentWindow. document.close();
$("#bold").click(function()
if($(this).hasClass("selected"))
$(this).removeClass("selected");
else
$(this).addClass("selected");
boldIt();
);
$("#italic").click(function()
if($(this).hasClass("selected"))
$(this).removeClass("selected");
else
$(this).addClass("selected");
ItalicIt();
);
$("#fonts").change(function()
changeFont($("#fonts").val());
);
);
function boldIt()
var edit = document.getElementById("textEditor").contentWindow;
edit.focus();
edit.document.execCommand("bold", false, "");
edit.focus();
function ItalicIt()
var edit = document.getElementById("textEditor").contentWindow;
edit.focus();
edit.document.execCommand("italic", false, "");
edit.focus();
function changeFont(font)
var edit = document.getElementById("textEditor").contentWindow;
edit.focus();
edit.document.execCommand("FontName", false, font);
edit.focus();
【问题讨论】：
【参考方案1】：break-work 是一个属性，如果它的 containert 元素的宽度小于文本大小，则拆分一个单词。
在这种情况下，您的容器不是 #textEditor iframe 元素，而是在其中生成的主体。所以word-wrap: break-word 属性必须设置在body 元素中，在iframe 内。
既然它已经生成了，你可以通过javascript来设置它，在你的文档准备方法中添加$('#textEditor').contents().find('body').css("word-wrap", "break-word");。
请看这里：http://jsfiddle.net/Kxmaf/514/
【讨论】：
【参考方案2】：最简单的方法：调用 designMode = "on" 时也调用 document.body.style.overflowWrap = "break-word"。在 Css 上，您可以声明 word-wrap: break-word，因此无需在 js 中调用它。只有 iframe 内的主体需要使用overflowWrap 操作...不要使用overflow-wrap...他的语义在js 上无效...使用overflowWrap。
【讨论】：
欢迎来到 ***！ JS、CSS等缩写请大写。您可以使用反引号 ` ` 格式化代码，以使您的答案更易于阅读。在此先感谢:-)当我在 iframe 中编辑时，如何自动更改 Html 页面的内容
...描述】：我创建了一个动态html页面，并通过单击在文本编辑器中打开动态html页面的内容在home.html页面中打开它。当我在文本编辑器中编辑内容时，我希望这些更改自动出现在动态h 查看详情
在 JupyterLab 代码编辑器中启用自动换行
】在JupyterLab代码编辑器中启用自动换行【英文标题】：EnablewordwrapinJupyterLabcodeeditor【发布时间】：2018-06-2012:05:42【问题描述】：我想为jupyterlab中的代码单元启用自动换行，但不知道如何操作。已经试过了：文件-->设置-->文... 查看详情
sql查询结果如何自动换行
...菜单。3、进入到了选项窗口的界面中的，进行选中文本编辑器的选项。4、选中文本编辑器的之后的下拉菜单中，进行选中所有语言。5、选中所有语言的之后，进行选择设置，勾选上自动换行。6、可以在勾选自动换行的之后，... 查看详情
在 MFC 中使用 DrawTextEx 自动换行
...间】：2012-06-2808:09:13【问题描述】：我需要在矩形内绘制文本。但是当文本很长时，它会剪掉多余的文本。我需要对文本进行换行，以便第一行不适合的多余文本部分转到下一行。我已经谷歌了，有人建议使用带有DT_CALCRECT标志... 查看详情
在 SwiftUI 中使用 Text() 换行
...布时间】：2019-06-2720:21:00【问题描述】：如果文本太长而无法在一行中显示，如何使用Text()进行换行？（类似于UIKit中的lineBreakMode）如果我输入一个长字符串，它只会在文本的右侧添加“...”。谢谢！编辑：我尝试将它与滚动视... 查看详情
帝国cms下iframe标签无法引入视频，ueditor编辑器中html标签无法显示问题，设置ueditor默认行高为1.75
...描述：1.帝国cms后台添加优酷视频，使用到iframe，富文本编辑器中使用iframe引入视频后检查发现html代码未出现iframe字样，排查后发现为ueditor限制过滤了部分html代码标签。2.为方便操作，需要设置ueditor默认行高为1.75.处理步骤：1.... 查看详情
如何在数据库中存储带有换行符的文本？
...新手网络开发人员。我正在尝试制作自己的基于Web的文本编辑器应用程序，因此我需要此信息。如何在数据库中存储带有换行符的文本。我正在考虑使用MongoDB。另外，我有兴趣知道：YouTube使用什么数据库来存储cmets？***使用什... 查看详情
如何让 Flex 文本控件自动换行
】如何让Flex文本控件自动换行【英文标题】：howtogetaFlextextcontroltowordwrap【发布时间】：2010-10-0623:53:43【问题描述】：我正在创建一个AdobeFlex应用程序，并且我有一个文本控件(mx:Text)，据说当您需要多行不可编辑文本时使用... 查看详情
使用 FPDF 在单元格中自动换行？
...间】：2011-03-2911:43:25【问题描述】：现在，当我使用带有文本的单元格时，它都保持在一行上。我知道我可以使用write函数，但我希望能够指定高度和宽度。这就是我现在所拥有的，但正如我所说，文本不会换行以保持尺寸：$pdf... 查看详情
表格里如何自动换行?
...格式菜单，选择单元格命令，然后选择对齐选项卡，选中文本控制标题下的自动换行复选框。 二、手动换行（硬回车）方法。 在编辑栏(或正编辑的单元格)中要换行的地方单击鼠标，按ALT+ENTER键来换行。问题三：excel表... 查看详情
在 RaphaelJS 中自动将文本换行到一个宽度？
】在RaphaelJS中自动将文本换行到一个宽度？【英文标题】：AutomaticallywraptexttoawidthinRaphaelJS?【发布时间】：2018-04-2922:19:30【问题描述】：我目前正在尝试使用RaphaelJS添加一些动态添加的文本。我希望文本在200像素处中断，然后在... 查看详情
电子表格文字怎么换行?
...格式菜单，选择单元格命令，然后选择对齐选项卡，选中文本控制标题下的自动换行复选框。 二、手动换行（硬回车）方法。 在编辑栏(或正编辑的单元格)中要换行的地方单击鼠标，按ALT+ENTER键来换行。问题五：EXCEL里... 查看详情
excelproject中，如何设置任务的文字自动换行
...段长文本（在编辑栏中可以看全内容），但是在单元格中无法全部显示出来，影响打印。因此需要文本在excel中自动换行。2.操作过程：1）选中A1单元格，然后鼠标右键-选择【设置单元格格式】。或者按Ctrl+1的快捷键调出【设置... 查看详情
javascript中的富文本编辑
一说起富文本，人们第一印象就是像使用word一样，在网页上操作文档。实际上差不多就是这样。富文本编辑，又称为WYSIWYG(WhatYouSeeIsWhatYouGet所见即所得)，指在网页中编辑富文本内容。本文将详细介绍如何通过javascript实现富文本... 查看详情
解决html5（富文本内容）连续数字字母不自动换行
...了一个与富文本相关的功能，大概描述一下：通过富文本编辑器添加的内容，通过input展示出来（这里用到了Vue的v-html指令）。 也是巧合，编辑了一个只有数字组成的长文本，等到展示的时候发现，内容超出了（没有自动换... 查看详情
停止 iFrame 中视频内容的自动播放
...frame中加载Youtube视频一样，只是让视频播放器可见，但我无法让视频停止自动播放。我使用了allow=" 查看详情
使用 dequeueReusableCellWithIdentifier 后如何编辑在新单元格中自动创建的文本标签
...eReusableCellWithIdentifier后如何编辑在新单元格中自动创建的文本标签【英文标题】：HowtoedittextlabelcreatedautomaticallyinanewcellafterusingdequeueReusableCellWithIdentifier【发布时间】：2016-07-2110:38:47【问题描述】：带有标识符“home”的单元格有t... 查看详情
为啥用在线编辑器输入的文字，显示出来的时候不能自动换行，而正常的文本框输入的就能自动换行。特别是
为什么用在线编辑器输入的文字，显示出来的时候不能自动换行，而正常的文字框输入的就能自动换行。特别是在为狐！不能换行，有什么方法，让在线编辑器输入的文字遇到边介的时候能自动换行。参考技术A用网页文本编辑... 查看详情