Text that is arranged vertically and adjusts its size and layout

I'm currently facing a challenge with vertical text display

Check out my plunker

What I'm attempting to accomplish is vertical text where:

  1. If a short text is placed inside the vertical text div, it should be aligned in the middle of the div
  2. If a long text is inserted inside the div, it should start from the bottom of the page but remain responsive (if the window is minimized, the text should move up within the div) and have ellipses (...) at the end if the text is too long.

I have successfully achieved 1, but the second objective is not fully functional. There is no responsiveness and the text is overflowing inside the div, making it invisible.

htmlcsssassresponsive-design

Answer №1

Here is a suggestion that could be of use to you

.main{
transform: translate(0, 50%) rotate(-90deg);
  
}
.sub{
    white-space: nowrap; 
    width: 250px; 
    height:20px; 
    overflow: hidden;
    text-overflow: ellipsis;   
    text-align:center;       
    position: absolute;  
    cursor: pointer;
    border: 1px solid grey;   
    background: linear-gradient(to right, white, lightgrey);
    border-radius: 2px;
}
.two{
  top:20px;
}
<div class="main">
   <div class="sub one">Hello world!</div>
</div>
<div class="main">
  <div class="sub two">a large text too large to contain in the div. large text too large to contain in the div.
  </div>
</div>

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

Tips for creating a form with recurring elements efficiently

Currently struggling to summarize the issue at hand with a simple title, so here's the detailed explanation: Imagine I'm inputting information for multiple contacts, and there are various fields involved: Name of the contact Method of Contact ...

jquerypythonhtmlflaskwtforms

Enhancing websites with font-awesome icons and upgrading from older versions to the latest

Seeking guidance on updating our project to use the latest Macadmine theme. The transition from Font Awesome 3 to Font Awesome 4 requires changing all icons to their proper names. I came across a helpful resource at https://github.com/FortAwesome/Font-Aw ...

cssangularjsfont-awesome

Press the div, excluding the button - Vue

I have a basic div that spans 100% of the width, containing a button inside. The issue I'm facing is that when I add a click event to the div, the entire div becomes clickable (including the button within it). What I want is for the whole div to be ...

javascriptcssvue.jsvuejs2vuejs3

Tips for integrating external JavaScript libraries and stylesheets into a widget

I am currently working on developing a custom Javascript widget that requires users to insert specific lines of code into their web pages. This code will then dynamically add an externally hosted javascript file, allowing me to inject HTML content onto the ...

javascripthtmlcssangularjs

Uncovering a specific element within an array using knockout techniques

I am attempting to set a variable to an element within an array that holds a particular value for a property. For instance, I want to retrieve the item with an "Id" value of 15. However, my current method only retrieves the first item in the array, regar ...

htmlknockout.js

JavaScript multiplying an array in HTML

Snippet of HTML code <input name="productCode[]" value="" class="tInput" id="productCode" tabindex="1"/> </td> <input name="productDesc[]" value="" class="tInput" id="productDesc" readonly="readonly" /></td> <input name="pr ...

javascripthtml

Guide to retrieving and showing specific items from a DropDownList in a Text box using JavaScript, HTML, and AngularJS

Can someone explain how to extract and select items from a DropDownList and display them in a Textbox using JavaScript/HTML/AngularJS? Here are more details: I have a dropdown list with many items. When I click on an item from the list, it should be dis ...

javascripthtmlangularjs

I developed a compact application utilizing Node.js in tandem with Express framework

There is an issue with the GPA calculator app built using Node.js and Express. It works fine for a single user, but when multiple users try to use it simultaneously, the scores are being combined, resulting in incorrect values. I need to create an app that ...

javascripthtmlnode.jsexpressejs

Conceal a column within a nested ListView

I am facing a challenge with nesting ListViews where I need to hide a specific table column in the inner ListView based on a certain parameter value in the URL. Specifically, I want to hide the ID column (both header and data) when the URL contains "...? ...

asp.nethtmllistview

Concatenating strings with JavaScript

I am currently working on building a web page using a combination of html and javascript. I have a json file that provides inputs for some specific content I need to display. My main goal is to set up an address variable in order to show the Google Maps AP ...

javascripthtmljsongoogle-maps

Ways to showcase a div exclusively on UC mini browser

I'm looking for help to create a script that will only display a div with the class "info-box" in UC Mini browser. This div should be hidden in all other browsers. Can someone assist me with this? <!doctype html> <html> <head> <m ...

javascriptjquerycssproxy

MS Edge modifies the attribute's empty value to 1

I have written a JavaScript code to extract values from a list, but in the Windows Edge browser, it returns a value of 1 even when the actual value of the <li> tag is blank. For example: HTML Code <ul> <li value="">Test 1</li&g ...

javascriptjqueryhtmlmicrosoft-edge

Tips for customizing the appearance of popup windows

I want to enhance the appearance of my popup window by applying a different format for opening it. How can I style it so that it looks visually appealing when the popup window opens? You can find below the source code I am working with: HTML: <div onM ...

javascripthtmlcssdom-events

Color of selected Bootstrap radio toggle buttons

Can anyone help me figure out how to customize the colors of radio toggle buttons using my style.css in Bootstrap? I've managed to change the background color in normal mode, but I'm struggling with changing the checked state. I've searched ...

htmlcssbootstrap-5

"Encountering an issue when trying to choose a value from a select list using jQuery and the

What am I missing here or what is the correct approach to solve this? Take a look at the following code snippet: code snippet $(document).ready(function() { $(".metric_div").hide(); $("#solid_radio").click(function() { $("#solid").show(); ...

javascriptjqueryhtml

Selenium encountered an error: Element not found - Could not locate element: {"method":"CSS selector","selector":"*[data-test="email-input"]}

Recently, my application has been encountering an error when trying to log in through a web form. The issue seems to be with locating the email input field: "no such element: Unable to locate element: {"method": "css selector", "s ...

javacssselenium-webdriver

Display a Bootstrap table that includes a visible vertical scrollbar

Creating a basic HTML page using Bootstrap library can be tricky when trying to incorporate a fixed header and a scrolling table. When simply adding a navbar and a table, the table ends up being positioned beneath the navbar, making it impossible to scroll ...

htmlcssbootstrap-5

What is preventing me from accessing the php page using the AJAX request?

I am encountering an issue with my HTML and PHP code. I am successfully able to receive the mail.value in txt, but facing a problem during the AJAX call as it doesn't even go into the error function. I need assistance in identifying and rectifying th ...

phphtmlajax

``To ensure Google Maps fills the entire height of its parent div, set the

Is there a way to display a Google Map at 100% of the parent div's height? I've noticed that setting the height to 100% makes the map not visible, but if I use a pixel value for the height, the map displays correctly. Are there any tricks or solu ...

htmlcssgoogle-mapsgoogle-maps-api-3maps

What is the best way to detect a checkbox click event inside a nested container?

I've created a list of divs, each with a corresponding pair containing more details. When you click on the "intro" div, the detailed pair opens and the intro is hidden. Each div also has a checkbox. I encountered an issue where clicking the checkbox i ...

jqueryhtmlcheckbox