[英]Why justifying with execCommand does not work properly?
为什么用execCommand进行对齐无法正常工作? 检查以下代码:
$('#JustifyLeft').click(function(){ document.execCommand("JustifyLeft", false, ""); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Select whole text and click the button</p> <div class="editable" contenteditable="TRUE" style="font-size: 27px; text-align: center;"> <span style="font-weight: bold; font-style: italic; text-decoration: underline;">Hi<span style="font-size: 35px;">I</span>am<span style="font-size: 18px;">Blah Blah</span>Ok</span> </div> <input type="button" id="JustifyLeft" value="Align Left">
在选择了整个文本并将其对齐后,您将看到下划线仅保留在<text>
节点上,而<span>
节点没有文本修饰。
这是错误吗? 有没有办法纠正它?
如果您在开发人员工具中查看元素结构,您将看到execCommand在Hi,am和Ok之后添加了</span>
,并用<div>
包裹起来,如下所示
<div style="text-align: left;">
<span style="font-style: italic; font-weight: bold; text-decoration: underline;">Hi</span>
<span style="font-style: italic; font-weight: bold; font-size: 35px;">I</span>
<span style="font-style: italic; font-weight: bold; text-decoration: underline;">am</span>
<span style="font-style: italic; font-weight: bold; font-size: 18px;">Blah Blah</span>
<span style="font-style: italic; font-weight: bold; text-decoration: underline;">Ok</span>
</div>
您可以通过将第一个<span>
更改为<div>
来纠正它,如下所示
<div style="font-weight: bold; font-style: italic; text-decoration: underline;">Hi
<span style="font-size: 35px;">I</span>am
<span style="font-size: 18px;">Blah Blah</span>Ok
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.