CODEWITHSUNDEEP
javascriptcss
user9237038
user9237038

Reputation:

Dynamic children are expanding width of parent

I have an editor which inserts span wrapped letters as you type. This allows each letter to be selected as nodes so styling can be applied. They are unwrapped later during export.

Although I have width set on the parent, the child span nodes are not "word wrapping" as they normally would.

In the example snippet below, hitting the "add letter wrapped word" button simulates what happens in the editor if you were to click into the first paragraph and type "test "

Previously my span wrapped words were breaking and starting on the next line when they reached the width of the parent paragraph. I'm not sure why they are not anymore. Instead they are expanding the width of their parent paragraph and column while remaining on one line.

Is this a CSS issue possibly related to the use of the table and table-cell display properties?

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>

Upvotes: 0

Views: 61

Answers (2)

chazsolo
chazsolo

Reputation: 8439

You are separating each text span with &nbsp;, a non-breaking space, which prevents automatic line breaks; instead just add a normal space between the spans:

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 = ' '; // &nbsp; 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>

Upvotes: 3

Brett DeWoody
Brett DeWoody

Reputation: 62773

Give the p > span elements a display: inline-block. Like this:

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 = '&nbsp;';

  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;
}

p > span {
  display: inline-block;
}
<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>

Upvotes: -1

Related Questions