whitespace 2

by ShaCP

HTML

<p class="text">Some Long Text</p>
<p class="text">TextThatIsTooLong</p>

CSS

/* *:not(.whiteSpace) {
  border: 1px solid;
} */

* {
  border: 1px solid;
}

.text * {
  border: unset;
}

.text {
  max-width: 15rem;
  display: flex;
  font-size: 6rem;
  margin: 0;
}

.p {
  display: flex;
}

.text:nth-child(2) {
  word-break: break-word;
}

.whiteSpace {
  background-color: lightskyblue;
  writing-mode: vertical-rl;
  text-orientation: upright;
  justify-content: center;
  align-items: center;
}

.text span:first-child {
  display: flex;
}

JavaScript

function whiteSpace() {
	debugger;
  var selection = window.getSelection();
  var textElements = document.getElementsByClassName('text');
  [...textElements].forEach(function (textElement) {
  var maxWidth = parseFloat(getComputedStyle(textElement).maxWidth);
  var textElementStyle = getComputedStyle(textElement);
  selection.selectAllChildren(textElement);
  var range = getSelection().getRangeAt(0);
  var boundingRect = range.getBoundingClientRect();
  var boundingRectWidth = boundingRect.width;
  var whiteSpace = maxWidth-boundingRectWidth
  textElement.innerHTML = textElement.innerHTML+`<span style="min-width:${whiteSpace}px;" class="whiteSpace"><span style="font-size:${whiteSpace}px">remove this</span></span>`
  });
}

whiteSpace();