Adjust the width of the container and rotate the text accordingly

I am looking to display text vertically (like a y-axis chart label) and need the ability to rotate text of varying lengths while keeping it on one line.

My attempt to achieve this using CSS3 transforms can be seen in this JSFiddle:

.rotate {
   transform: rotate(270deg);
}

However, the element's original width and height remains unchanged after rotation, as stated in the specification:

In the HTML namespace, the transform property does not affect the flow of the content surrounding the transformed element.

This causes the container width to expand based on the length of the label text, impacting the position of adjacent charts.

Is there a way to rotate the text and adjust its container size to fit the new width? I welcome any solutions, whether using JavaScript/jQuery or exploring alternative methods.

csstransform

Answer №1

I figured out a solution by utilizing absolute positioning. The trick to rotating text is to position it "relative to the border of its closest positioned ancestor". Here's how it works:

  • Apply position: relative to the container to establish it as the "closest positioned ancestor"
  • Use position: absolute on the rotated text, positioning it at the bottom of the container (adjusting for line height)
  • Rotate the text from the top-left corner

Check out the demo on JSFiddle

.container {
  position: relative; /*establish the container as the closest positioned ancestor*/
  border: 1px solid red;
  display: inline-block;
  height: 400px;
  min-width: 30px; /*matched with line-height of rotated text*/
}

.rotate {
  text-align: center;
  overflow: hidden;
  height: 30px;
  line-height: 30px;
  width: 400px; /*corresponds with container height*/
  position: absolute;
  bottom: -32px; /*0 = bottom of container, then adjust for (line-height+border)*/
  border: 1px solid blue;
  transform: rotate(-90deg);
  transform-origin: top left;
}

Key Points to Note:

  • Suitable text width can be defined (e.g. matching the container height)
  • Assumption of no line breaks in text (single-line approach)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to adjust the width of the comment box on the Facebook "Like" button?

Is there a way to set the width of the comment box that appears after clicking the Facebook "Like" button? I know how to adjust the width of the button itself and related content, but can't find any options for the comment box: I've tried overri ...

javascripthtmlcssfacebookfacebook-like

Difficulty altering link hover background color

I'm having trouble changing the hover effect background-color on the tweets of this page: Despite my efforts, all the links except for the latest tweets are working perfectly. What am I missing? Here's what I've been trying... <script& ...

javascriptjqueryhtmlcss

Having trouble with images not showing up on React applications built with webpack?

Hey there! I decided not to use the create react app command and instead built everything from scratch. Below is my webpack configuration: const path = require("path"); module.exports = { mode: "development", entry: "./index.js", output: { pa ...

javascripthtmlcssreactjs

Ideal C++ tool for displaying a non-changing HTML page

I am looking to develop a simple cross-platform C++ project for displaying HTML pages, like an application that showcases help materials. These pages may contain images and styles (CSS embedded in HTML). I am researching the best way to incorporate the fol ...

htmlc++cssqtzooming

Why is the 3D CSS transform (translateZ) feature malfunctioning on Android 4.0.3?

I have this HTML code that is functioning well on Chrome, Safari, and Mobile Safari. However, when testing it on Android 4.0.3, the translateZ property does not seem to have any desired effect on the div element. While everything else works as expected, ...

androidcss3dwebkittransform

Utilize the CSS content property to embed an image without causing it to distort in size

Struggling to swap out one image for another without stretching it? In my demo, I replaced an elephant with a lion using only CSS - no changes allowed to the HTML. Unfortunately, the lion image ends up stretched. Even adding background-size: cover doesn&ap ...

htmlcss

Choose a specific div element from a collection of dynamically generated divs in Angular

I have been working on a code to dynamically generate div elements using the *ngFor directive. Here is what I have so far: <div *ngFor = "let item of Items"> <p>Item : {{item}} </p> </div> The challenge I encountered is that w ...

htmlcssangulartypescriptcss-selectors

transforming a table into a stylized CSS design

Seeking assistance in converting a table into CSS as I am new to CSS: <table dir="ltr" width="500" border="0" align="center"> <caption><font face="Helvetica">Movies</font></caption> <colgroup width="50%" /> ...

htmlcss

What is the best way to manipulate the canvas "camera" in HTML?

I am currently developing a 3D game that involves navigating through skyboxes. My goal is to have the camera respond to user input, specifically detecting key presses (using WASD controls) to move the camera accordingly. Do you have any suggestions on how ...

javascripthtmlcsshtml5-canvas

Aligning the navigation links vertically

I am working on aligning my navigation bar vertically, even when I scroll the page. I found a method in another thread which suggests using the following CSS code for vertical alignment: #container { position: absolute; top: 50%; height: 400p ...

htmlcssalignment

Issues with Image Loading in Azure WebMatrix

I am currently using WebMatrix to host my website, but I'm facing some issues with certain elements not loading correctly. Specifically, I have two pictures on my site that are linked to a directory on my local machine. I would like to know how I can ...

htmlcssazure

One crucial factor to consider when dealing with dual screen setups is the

Imagine you have the following code snippet : <ul> <li>Menu1 <ul class="submenu"> <li class="firstmenu">submenu-1</li> <li>submenu-2</li> < ...

jqueryhtmlcss

Eliminating the background color upon clicking

Here is the link structure I have set up: <ul> <li><a href="home.html"><span>home</span></a></li> </ul> However, when I click on the link, a shadow appears. I would like the link to appea ...

htmlcssbootstrap-4

Center two elements within a div container both horizontally and vertically

I am trying to vertically center a text and a button within a container. The text should be positioned in the middle of the div, while the button should be aligned to the right. What is the best way to achieve this layout where the text element is centere ...

htmlcss

In Safari, the scrollbar appears on top of any overlays, popups, and modals

On my webpage, I have a div with the CSS property overflow-y: scroll. The page also features several popup modals and overlays. Strangely, the scrollbar of the div appears on top of these overlays instead of behind them. I attempted to resolve this issue b ...

javascripthtmlcsssafariscrollbar

What is the best way to position a div in relation to a table header (th) but not inside it?

I'm trying to create a table header that displays a help text (div) when clicked on. However, the help div is causing the table header to be larger than the other headers. Below is the code snippet: #help_box { border-radius: 20px; ba ...

htmlcsshtml-tableorientation

Tips for effectively implementing grids within bootstrap modal dialogs?

Exploring the functionality of the bootstrap-5 grid system within a modal popup has raised a puzzling issue. To investigate further, I began by incorporating the grid example into the main modal template sourced from https://getbootstrap.com/docs/5.0/compo ...

csstwitter-bootstrapbootstrap-5

Looking to include a badge within the nebular menu

Can someone assist me with adding a badge to the Nebular menu to display the inbox count dynamically? Any help would be greatly appreciated. Thanks! import { NbMenuItem } from '@nebular/theme'; export const MENU_ITEMS: NbMenuItem[] = [ { ti ...

htmlcssangulartypescriptnebular

Unexpected Placement of CSS Grid Items

I am currently facing an issue with aligning items in a nested grid using grid-column/grid-row assignment. After setting the template with grid-template-rows:/grid-template-columns, I expected the $50 and Give Now items to appear on row 3, with one in colu ...

cssgrid-layoutcss-grid

What is the procedure to reduce my final search result by 1?

When the search is triggered, I want to filter the images by name. However, the issue arises when trying to make everything disappear on filter addition. <ul id="list2"> <li class="in2"> An extra number is added ...

javascripthtmljquerycssajax