What is the best way to ensure my <h5> element fits perfectly inside its parent div vertically?

Currently facing an issue with finding a solution to my problem.

The challenge involves having a header tag nested within multiple divs. Below is the structure:

<div class="card">
  <div class="layout-left">
    <div class="card-header">
       <h5> I am supposed to be a straight vertical line </h5>
     </div
   </div>
   ... (other divs)
</div>

The main issue lies in attempting to make the h5 tag vertically aligned, using:

transform: rotate(-90deg);

However, the text remains inline due to inheriting the width of the parent div, causing the letters to cluster together. The code provided has been simplified by omitting other content within the divs where some are utilized as flex boxes.

To better comprehend the dilemma, please refer to this jfiddle. In case a resolution requires Javascript or JQuery library, it's acceptable, but CSS alternatives are preferred.

Your assistance is greatly appreciated :)

javascriptjqueryhtmlcss

Answer №1

Instead of using width:100%, try utilizing white-space:nowrap.

Check out this code snippet on JSFiddle

.card-header h5 {
  color: white;
  transform: rotate(-90deg);
  white-space: nowrap;
}

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

The resolution of Angular 8 resolver remains unresolved

I tried using console.log in both the constructor and ngOnInit() of Resolver but for some reason, they are not being logged. resolve:{serverResolver:ServerResolverDynamicDataService}}, console.log("ServerResolverDynamicDataService constructor"); console ...

javascriptangulartypescriptangular-ui-routerangular-resolver

Troubles arising while submitting data from AngularJS to Amazon S3

I am currently in the process of developing an application using the MEAN (MongoDB, Express, AngularJS, node.js) stack where I need to upload image files to Amazon S3. Here is my approach: Initially, an http get request is sent to my API which outlines th ...

javascriptnode.jsangularjsamazon-s3

What is the best way to authenticate ckeditor with jquery in an asp.net core application?

Is it possible to validate a required ckeditor and display a message prompting the user to fill in the description if it's empty upon form submission? I've tried various solutions but none seem to work. Here is the jquery code snippet: $(document ...

jqueryasp.net-coreckeditor

Adjust the width of a textarea to expand evenly within its container when exceeding the specified width limit using CSS

I am currently attempting to adjust the size of this textarea proportionally. However, when I try to increase it beyond 100% width, it only expands to the right side. I have already experimented with using margin: auto and display: block but unfortunately, ...

htmlcsspug

Error TS2322: Cannot assign type 'Promise<Hero | undefined>' to type 'Promise<Hero>'

I am currently studying angular4 using the angular tutorial. Here is a function to retrieve a hero from a service: @Injectable() export class HeroService { getHeroes(): Promise<Hero[]> { return new Promise(resolve => { // ...

javascriptangulartypescript

Tips for utilizing a personalized extension in Visual Studio Code

Embarking on my HTML journey, so please bear with me. I've been watching tutorial videos to get a better grasp of it, and one of the tutorials I'm following shows how to create a resume on GitHub using VS Code. Check out the video here At 3:44 ...

htmlcssvisual-studio-codefonts

What is the best way to set checkboxes to default values using a model?

My journey with angular.js continues as I embark on creating my first non-tutorial web app. In this endeavor, I am utilizing two smart-tables and checklist-model for a seamless user experience. The initial table uses a st-safe-src of all_types, containing ...

javascriptangularjsjsonsmart-tablechecklist-model

Can you explain the contrast between img.height and img.style.height?

I'm currently in the process of resizing a series of images by iterating through an array and adjusting their sizes. if(items[0].height > 700 || items[0].width > 700){ items[0].style.height = "700px"; items[0].style.width = "700px"; } As ...

javascripthtmldomhtml5-canvas

Learn the easy steps to position an image to the right using FreeMarker

I'm attempting to align the final image on the right side of the page in order to achieve a symmetrical look. The code I have been using in FTL is as follows, but it consistently ends up next to the middle section: <table class="h ...

htmlcssfreemarker

Can we invoke a function through Ajax?

Apologies for my lack of experience, I am just getting acquainted with Ajax. Please bear with me if my question seems unrefined. I attempted to do something, but unfortunately, I did not achieve success. Let me explain what I was trying to accomplish: I ...

javascriptphpjqueryajax

How to vertically center align h1 using Bootstrap

<body> <nav class="navbar navbar-expand-md bg-dark navbar-dark py-3"> <div class="container"> <div class="navbar-brand mx-auto"><h2 style="color: white;">Name< ...

htmlcssbootstrap-4

In TypeScript, make sure to verify the type of an object to avoid any potential compilation errors stemming

Here is the code snippet: export default class App { el: HTMLElement; constructor(el: string | HTMLElement) { if (typeof el === "string") { this.el = document.getElementById(el); } if (typeof el === typeof this.el) { t ...

javascripttypescripttypeguards

Guide on releasing a TypeScript component for use as a global, commonJS, or TypeScript module

I have developed a basic component using TypeScript that relies on d3 as a dependency. My goal is to make this component available on npm and adaptable for use as a global script, a commonJS module, or a TypeScript module. The structure of the component is ...

javascripttypescriptnpmmodulecommonjs

Offspring of div should have equal height without the top and bottom padding

Looking to ensure that the height of child divs matches the height of the parent divs. Currently, the divs expand as the page is resized. This is for search results, so there are multiple identical code blocks. function matchHeight() { $result = $(&a ...

javascriptjqueryhtml

Loading input datalist in Firefox postponed

My goal is to implement an input field for a username that allows users to select from a wide range of names/usernames. I want them to be able to enter a partial string from the name or username. Instead of loading the entire list initially, I aim to load ...

javascripthtmljqueryformsautosuggest

Is it possible for a React application to manage errors (status code 4xx) using a try-catch block

Currently delving into React (using hooks) and facing an interesting challenge. I am in the process of building a Notes Application (from FullStackOpen's learn react section). The database I'm working with only allows notes with content length gr ...

javascriptreactjstry-catchreact-hooks

Is it possible to utilize a JavaScript variable in this particular scenario and if so, what is the

let myVariable = <?php echo json_encode($a[i want to insert the JS variable here]); ?>; Your prompt response would be highly valued. Many thanks in advance. ...

javascriptphpjson

What is the best way to activate an input field when a checkbox is selected in JQuery?

I'm encountering an issue with some code I've written. Here is the portion causing trouble: $('#Reserve, #BuyItNowPrice, #featureplate').attr('disabled','disabled'); $('.fake-fieldset .fake-input').css({&a ...

jqueryhtml-input

Positioning of Responsive Slider

I'm currently working on a responsive website, but I am facing challenges with the placement of the slideshow dots. When I switch to the device toolbar, they seem to change position. I have tried various methods such as using relative and absolute uni ...

javascripthtmlcss

Verify the accuracy of the color value on a web page using Selenium in Java

As a beginner in using Selenium with Java, I encountered an issue related to a symbol in my connected class turning green. I needed to assert whether the symbol actually changed its color. Below is the code snippet that I used: Boolean connectionSymbolG ...

javacssseleniumcss-selectors