Html Question posted in
Some basic documentation can be found here.

Html – Writing-mode vertical text overflowing DIV

I have p tags within a div that is wider than it is high. One of the p has the writing mode set to vertical-rl. Although the text does wrap much of the text is clipped. It looks like the height of the vertical-rl p matches the width of the div so when it’s rotated some of it is beyond the div.

My Code:

div {
  position: absolute;
  border: 1px dotted red;
  left: 10px;
  top: 10px;
  height: 200px;
  width: 300px;
  overflow: hidden;
}

p {
  font-family: Georgia, serif;
  font-size: 18px;
}

.vertical-rl {
  writing-mode: vertical-rl;
  color: #0074d9;
}
<div>
  <p>This is text that needs to be read from top to bottom, and from left to right.</p>
  <p class="vertical-rl">This is text that needs to be read from top to bottom, and from right to left.</p>
</div>

I have tried setting block-size and inline-size but I can’t get the text to not be clipped. How can I have vertical-rl text wrap early enough that it doesn’t overflow its container?

Tags:

2

Answers


  1. 0

    You can give the p a max-height

    div.container {
  position: relative;
  border: 1px dotted red;
  left: 10px;
  top: 10px;
  height: 200px;
  width: 300px;
  overflow: hidden;
}

p {
  font-family: Georgia, serif;
  font-size: 18px;
}

.vertical-rl {
  writing-mode: vertical-rl;
  color: #0074d9;
  max-height: 100px;
}
    <div class="container">
  <p>This is text that needs to be read from top to bottom, and from left to right.</p>
  <p class="vertical-rl">This is text that needs to be read from top to bottom, and from right to left.</p>
</div>

    You could calculate it too needed

    document.addEventListener("DOMContentLoaded", function() {
  // Select the container div
  const containerDiv = document.querySelector('div.container');

  // Get the computed style of the container div
  const containerStyle = window.getComputedStyle(containerDiv);

  // Calculate the total height of the container including padding
  // Note: Padding is included in offsetHeight, so we don't need to add it manually
  const containerHeight = containerDiv.offsetHeight;

  // Get the height of the first paragraph
  let firstParagraphHeight = document.querySelector('p:not(.vertical-rl)').offsetHeight;
  firstParagraphHeight += (2 * 20); // margins are NOT included
  // Calculate the new max-height for the vertical-rl paragraph by subtracting
  // the height of the first paragraph from the container's height
  const newMaxHeight = containerHeight - firstParagraphHeight;
  // console.log(containerHeight, firstParagraphHeight, newMaxHeight)

  // Apply this new max-height to the vertical-rl paragraph
  const verticalText = document.querySelector('.vertical-rl');
  verticalText.style.maxHeight = `${newMaxHeight}px`;
});
    div.container {
  position: relative;
  border: 1px dotted red;
  left: 10px;
  top: 10px;
  height: 200px;
  width: 300px;
  overflow: hidden;
}

p {
  font-family: Georgia, serif;
  font-size: 18px;
}

.vertical-rl {
  writing-mode: vertical-rl;
  color: #0074d9;
}
    <div class="container">
  <p>This is text that needs to be read from top to bottom, and from left to right.</p>
  <p class="vertical-rl">This is text that needs to be read from top to bottom, and from right to left.</p>
</div>
    Login or Signup to reply.
  2. 0

    One way would be to make the container a grid, so giving the second paragraph defined space:

    div {
  position: absolute;
  border: 1px dotted red;
  left: 10px;
  top: 10px;
  height: 200px;
  width: 300px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
}

p {
  font-family: Georgia, serif;
  font-size: 18px;
}

.vertical-rl {
  writing-mode: vertical-rl;
  color: #0074d9;
}
    <div>
  <p>This is text that needs to be read from top to bottom, and from left to right.</p>
  <p class="vertical-rl">This is text that needs to be read from top to bottom, and from right to left.</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search