正确包装文本

Question

在此 JSFIDDLE 中，我希望文本 ("piece of text") 直接环绕在其上方的文本 ("this is long") 下方，而不是在红色 X 下方。你能帮忙吗，请？弄了好久没有好结果:(

$('#myTd').contents().filter(function () {
    return this.nodeType == 3
}).each(function () {
    this.parentNode.innerHTML = this.textContent.replace('', '<span style="color:#db1926">&#10006</span>&nbsp; this is long piece of text');
});

Answer 1

这不是脚本问题。您需要 1) 使用 table 单元格来包含文本以使其保持对齐，或者 2) 使用 CSS 创建 suitable 缩进：

padding-left: 13px;
text-indent: -22px;

Demo

Answer 2

我能够通过向插入的文本添加 div 并应用以下属性:

来完成此操作

#image {
    float: left;
}

#text {
    width: 1000px;
    display: table-row;
}

这是一个带有强制文本宽度的黑客解决方案，但它应该强制它们并排呈现。这是您的 jsfiddle 的示例分支：https://jsfiddle.net/kq6aa4wh/2/

正确包装文本

Wrapping Text Properly

html

css