Spin the text within a div by 90 degrees and align it to the right side

Question

Spin the text within a div by 90 degrees and align it to the right side

I have been attempting to create an information box that contains a simple info text div. On the right side of this info box, I want to include a text labeled "more info" within a nested div to signify that the info box is interactive. To save space, I would like to rotate the text by 90 degrees so that it only takes up as much space as the height of the text "more info". However, I have been struggling to achieve this. When I try to rotate the text, it either breaks into two lines or is not vertically centered despite using white-space: nowrap;.

Does anyone have any suggestions for alternative CSS properties I could experiment with?

I have created a fiddle to demonstrate the issue: https://jsfiddle.net/girlscout/9e5u3j5w/3/

In this example, I have colored the two divs differently for clarity on their behavior.

Special thanks to Brett for the code snippet suggestion. Here is the code:

.first-div {
  border:1px solid blue; width:300px; height:100px; margin:20px auto;
  display:flex;
}
.second-div {
  background-color:green;
}

.mytext{
    transform:rotate(-90deg);
    /*white-space: nowrap;*/
}

<div class="first-div">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
  </p>
     <div class="second-div"><p class="mytext">more info</p></div>
</div>

css

Answer 1

Answer №1

To achieve the desired outcome, adjust the width of the .second-div and modify the padding and transform-origin of .mytext. It is important to note that these changes will need to be customized for each tab you create.

.second-div {
   background-color: green;
   width: 150px;
   position: relative;
}
.mytext {
   position: absolute;
   white-space: nowrap;
   top: 0;
   padding: 12px;
   color: #FFF;
   transform-origin: 50% 100%;
   transform: rotate(-90deg);
}

Answer 2

To achieve the desired outcome, adjust the width of the .second-div and modify the padding and transform-origin of .mytext. It is important to note that these changes will need to be customized for each tab you create.

.second-div {
   background-color: green;
   width: 150px;
   position: relative;
}
.mytext {
   position: absolute;
   white-space: nowrap;
   top: 0;
   padding: 12px;
   color: #FFF;
   transform-origin: 50% 100%;
   transform: rotate(-90deg);
}

Answer 3

Answer №2

Utilizing the transform-origin property will play a crucial role in achieving the desired outcome.

Additionally, by applying position: absolute to the .mytext element and specifying fixed values for width, height, and other properties, we create a flexible design that can adapt to various content types.

Here's an example showcasing this concept:

.first-div {
  border: 1px solid blue;
  width: 300px;
  height: 100px;
  margin: 20px auto;
  display: flex;
}

.second-div {
  position: relative;
  background-color: green;
  height: 100%;
  box-sizing: border-box;
  flex-basis: 80px;
}

.mytext {
  position: absolute;
  top: 20px;
  transform: rotate(-90deg);
  transform-origin: 0% 0%;
  white-space: nowrap;
  margin: 100px 0 0 0;
  line-height: 30px;
  width: 100px;
  text-align: right;
}

.first-div.larger {
  height: 250px;
}

<div class="first-div">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
  </p>
  <div class="second-div">
    <p class="mytext">more info</p>
  </div>
</div>

<div class="first-div">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
  </p>
  <div class="second-div">
    <p class="mytext">info</p>
  </div>
</div>

<div class="first-div larger">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
  </p>
  <div class="second-div">
    <p class="mytext">even more info</p>
  </div>
</div>

Answer 4

Utilizing the transform-origin property will play a crucial role in achieving the desired outcome.

Additionally, by applying position: absolute to the .mytext element and specifying fixed values for width, height, and other properties, we create a flexible design that can adapt to various content types.

Here's an example showcasing this concept:

.first-div {
  border: 1px solid blue;
  width: 300px;
  height: 100px;
  margin: 20px auto;
  display: flex;
}

.second-div {
  position: relative;
  background-color: green;
  height: 100%;
  box-sizing: border-box;
  flex-basis: 80px;
}

.mytext {
  position: absolute;
  top: 20px;
  transform: rotate(-90deg);
  transform-origin: 0% 0%;
  white-space: nowrap;
  margin: 100px 0 0 0;
  line-height: 30px;
  width: 100px;
  text-align: right;
}

.first-div.larger {
  height: 250px;
}

<div class="first-div">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
  </p>
  <div class="second-div">
    <p class="mytext">more info</p>
  </div>
</div>

<div class="first-div">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
  </p>
  <div class="second-div">
    <p class="mytext">info</p>
  </div>
</div>

<div class="first-div larger">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
  </p>
  <div class="second-div">
    <p class="mytext">even more info</p>
  </div>
</div>

Answer 5

Answer №3

I believe I have a good grasp on what you're seeking. To achieve the desired outcome, you'll need to apply positioning attributes to the first-div element as relative and the second-div element as absolute. Take a look at the code snippet below:

View the code here: CODEPEN

.first-div {
      border: 1px solid blue; 
      width: 400px; 
      height: 100px; 
      margin: 20px auto;
      display: flex;
      position: relative;
      padding-right: 40px;
    }
    .second-div {
      position: absolute;
      top: 0px;
      right: 0px;
      background-color: green;
    }
    .mytext{
      transform:rotate(-90deg);
      padding: 20px 0;
      font-size: 0.7em;
      color: #fff;
    }

<div class="first-div">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
      </p>
      <div class="second-div">
        <p class="mytext">more info</p>
      </div>
    </div>

Answer 6

I believe I have a good grasp on what you're seeking. To achieve the desired outcome, you'll need to apply positioning attributes to the first-div element as relative and the second-div element as absolute. Take a look at the code snippet below:

View the code here: CODEPEN

.first-div {
      border: 1px solid blue; 
      width: 400px; 
      height: 100px; 
      margin: 20px auto;
      display: flex;
      position: relative;
      padding-right: 40px;
    }
    .second-div {
      position: absolute;
      top: 0px;
      right: 0px;
      background-color: green;
    }
    .mytext{
      transform:rotate(-90deg);
      padding: 20px 0;
      font-size: 0.7em;
      color: #fff;
    }

<div class="first-div">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
      </p>
      <div class="second-div">
        <p class="mytext">more info</p>
      </div>
    </div>

Answer 7

Answer №4

There may be a potential solution, although it involves some duplication of your markup. You will require two elements: one for the invisible filler text, and the other for the visible text:

<div class="second-div">
  <!-- Used to precalculate/reserve space, not displayed -->
  <div class="mytext-spacer">more info</div>

  <!-- The actual text that is displayed and rotated -90deg -->
  <div class="mytext">more info</div>
</div>

This solution makes use of a spacer element that occupies the space needed for the rotated text. The .mytext-spacer element is styled to display text vertically in order to reserve the space:

.mytext-spacer {
  text-orientation: upright;
  writing-mode: vertical-rl;
  visibility: hidden;
}

The spacer element is hidden using visibility: hidden instead of display: none to ensure it still reserves the necessary space. Using display: none would remove it from the document flow and disrupt the layout.

After setting up the spacer, rotate your actual .mytext element. To center the text visually, a combination of position and translate properties is used, as flexbox would interfere with the layout involving the hidden spacer text:

.mytext {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  text-align: center;
}

.first-div {
  border: 1px solid blue;
  width: 300px;
  height: 100px;
  margin: 20px auto;
  display: flex;
  /*justify-content:flex-end;  */
}

.second-div {
  background-color: green;
  position: relative;
}

.mytext-spacer {
  text-orientation: upright;
  writing-mode: vertical-rl;
  visibility: hidden;
}

.mytext {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  text-align: center;
}

<div class="first-div">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
  </p>
  <div class="second-div">
    <div class="mytext-spacer">more info</div>
    <div class="mytext">more info</div>
  </div>
</div>

<div class="first-div">
  <p>Lorem ipsum dolor sit amet, consect-uer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
  </p>
  <div class="second-div">
    <div class="mytext-spacer">this is a long long text</div>
    <div class="mytext">this is a long long text</div>
  </div>
</div>

Answer 8

There may be a potential solution, although it involves some duplication of your markup. You will require two elements: one for the invisible filler text, and the other for the visible text:

<div class="second-div">
  <!-- Used to precalculate/reserve space, not displayed -->
  <div class="mytext-spacer">more info</div>

  <!-- The actual text that is displayed and rotated -90deg -->
  <div class="mytext">more info</div>
</div>

This solution makes use of a spacer element that occupies the space needed for the rotated text. The .mytext-spacer element is styled to display text vertically in order to reserve the space:

.mytext-spacer {
  text-orientation: upright;
  writing-mode: vertical-rl;
  visibility: hidden;
}

The spacer element is hidden using visibility: hidden instead of display: none to ensure it still reserves the necessary space. Using display: none would remove it from the document flow and disrupt the layout.

After setting up the spacer, rotate your actual .mytext element. To center the text visually, a combination of position and translate properties is used, as flexbox would interfere with the layout involving the hidden spacer text:

.mytext {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  text-align: center;
}

.first-div {
  border: 1px solid blue;
  width: 300px;
  height: 100px;
  margin: 20px auto;
  display: flex;
  /*justify-content:flex-end;  */
}

.second-div {
  background-color: green;
  position: relative;
}

.mytext-spacer {
  text-orientation: upright;
  writing-mode: vertical-rl;
  visibility: hidden;
}

.mytext {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  text-align: center;
}

<div class="first-div">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
  </p>
  <div class="second-div">
    <div class="mytext-spacer">more info</div>
    <div class="mytext">more info</div>
  </div>
</div>

<div class="first-div">
  <p>Lorem ipsum dolor sit amet, consect-uer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
  </p>
  <div class="second-div">
    <div class="mytext-spacer">this is a long long text</div>
    <div class="mytext">this is a long long text</div>
  </div>
</div>

Spin the text within a div by 90 degrees and align it to the right side

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How can I attach a cookie to a div that becomes visible after a few seconds of video playback?

labels placed beneath evenly spaced radio buttons arranged horizontally

JavaScript expression not being processed

What could be causing the Bootstrap Navbar toggle icon button to not display navigation items when clicked?

How to Properly Adjust the Material UI CircularProgress Size

My current scroll animations are problematic as they are causing horizontal scrolling beyond the edge of the screen

The issue of Ejs partial header and footer file only functioning in one file and not the other (both at the same directory level)

What is the best way to resize SVG graphics effectively?

Achieving unique horizontal and vertical spacing in Material UI Grid

Is it just me or does my wrapper always hover above the bottom of the screen?

Expanding the axes using Google Charts

Various CSS libraries offer a range of design options, including DataTables and Bootstrap

Center the HTML elements on the page

Guide to adjusting the number of bounces using jQuery's User Interface (UI)

Using HTML to load an image is not possible, as it can only be done using CSS

`We are experiencing alignment issues with the Bootstrap drop-down menu`

What are the steps to reveal the second element once the first one has vanished?

Struggling to format boxes or display images on your WordPress website?

Div positioned absolutely beneath the footer

A universal setting takes precedence over Vuetify divider colors