javascript - 动态 child 正在扩大 parent 的宽度

Question

我有一个编辑器，可以在您键入时插入跨度换行字母。这允许选择每个字母作为节点，以便可以应用样式。它们稍后在导出过程中解包。

虽然我在父级上设置了宽度，但子跨度节点并不像通常那样“自动换行”。

在下面的示例片段中，点击“添加字母包裹的单词”按钮模拟了如果您单击第一段并键入“test”，编辑器中会发生什么

以前，当我的 span 换行字达到父段落的宽度时，它们会中断并从下一行开始。我不确定为什么他们不再了。相反，他们扩展了父段落和列的宽度，同时保持在一行上。

这是一个 CSS 问题，可能与 table 和 table-cell 显示属性的使用有关吗？

app = {};

app.addLetterWrappedWord = function() {
  var word = document.createElement('span');

  var letter;

  letter = document.createElement('span');
  letter.innerText = 't';
  word.appendChild(letter);

  letter = document.createElement('span');
  letter.innerText = 'e';
  word.appendChild(letter);

  letter = document.createElement('span');
  letter.innerText = 's';
  word.appendChild(letter);

  letter = document.createElement('span');
  letter.innerText = 't';
  word.appendChild(letter);

  app.p0.appendChild(word);

  var space = document.createElement('span');
  space.innerHTML = ' ';

  app.p0.appendChild(space);

}

app.add0 = document.getElementById('add0');

app.p0 = document.getElementsByTagName('p')[0];

app.add0.addEventListener('click', function() {
  app.addLetterWrappedWord();
});

.row {
  outline: 1px solid lime;
  display: table;
  width: 600px;
  padding: 0.5rem;
}

.col {
  padding: 0.5rem;
  display: table-cell;
  width: 100%;
  outline: 1px dotted cyan;
  width: 200px;
}

p {
  outline: 1px dotted magenta;
  padding: 0.3rem;
  width: 200px;
  max-width: 200px;
}

<button id="add0">add letter wrapped word</button>

<div class="row">

  <div class="col">
    <p></p>
  </div>

  <div class="col">
    <p></p>
  </div>

  <div class="col">
    <p></p>
  </div>

</div>

Answer 1

您使用   分隔每个文本范围，不间断空格，可防止自动换行；而只是在跨度之间添加一个正常的空间:

app = {};

app.addLetterWrappedWord = function() {
  var word = document.createElement('span');

  var letter;

  letter = document.createElement('span');
  letter.innerText = 't';
  word.appendChild(letter);

  letter = document.createElement('span');
  letter.innerText = 'e';
  word.appendChild(letter);

  letter = document.createElement('span');
  letter.innerText = 's';
  word.appendChild(letter);

  letter = document.createElement('span');
  letter.innerText = 't';
  word.appendChild(letter);

  app.p0.appendChild(word);

  var space = document.createElement('span');
  space.innerHTML = ' '; //   here to normal space
  app.p0.appendChild(space);

}

app.add0 = document.getElementById('add0');

app.p0 = document.getElementsByTagName('p')[0];

app.add0.addEventListener('click', function() {
  app.addLetterWrappedWord();
});

.row {
  outline: 1px solid lime;
  display: table;
  width: 600px;
  padding: 0.5rem;
}

p {
  outline: 1px dotted magenta;
}

.col {
  padding: 0.5rem;
  display: table-cell;
  width: 100%;
  outline: 1px dotted cyan;
  width: 200px;
}

p {
  padding: 0.3rem;
  width: 200px;
  max-width: 200px;
}

<button id="add0">add letter wrapped word</button>

<div class="row">

  <div class="col">
    <p></p>
  </div>

  <div class="col">
    <p></p>
  </div>

  <div class="col">
    <p></p>
  </div>

</div>