Vertical text inside a button appears very tidy

I have a container styled to look like a button, and I want to display the text in it vertically while maintaining a neat appearance. How can I achieve this effect? FIDDLE

    <div id="btn-toggle-menu">Hide Menu</div>

CSS:

    #btn-toggle-menu {
       position:fixed;
       width:10.9px;
       line-height:25px;
       cursor:pointer;
       border:1px solid #333;
       background-color:#ccc;
       text-align:center;
       font-weight:bold;
       font-size:20px;
       word-wrap: break-word;
   }
htmlcss

Answer №1

Check out the demonstration HERE

<div id="btn-toggle-menu">H
 i
 d
 e

 M
 e
 n
 u
</div>

CSS:

    #btn-toggle-menu {
      position:fixed;
      top:0;
      left:0;
      width:20px;
      cursor:pointer;
      border:1px solid #333;
      background-color:#ccc;
      text-align:center;
      white-space: pre;
   }

Answer №2

It seems like your issue has been resolved. Give this a try.

HTML:

<div id="btn-toggle-menu">
    <div style="width:10px;">
        Hide Menu
    </div>
</div>

CSS:

#btn-toggle-menu {
    position:fixed;
    width:25px;
    line-height:25px;
    cursor:pointer;
    border:1px solid #333;
    background-color:#ccc;
    text-align:center;
    font-weight:bold;
    font-size:20px;
    word-wrap: break-word;
    padding-left:8px;
}

Check out the Live Demo

Answer №3

One approach that comes to mind is utilizing a width of 1em (equivalent to one width of the letter M) and employing white-space in pre-mode:

#btn-toggle-menu {
    text-align: center;
    width:1em;
    word-wrap: pre;
}

The text will be centered.

Check out the demonstration here: http://jsfiddle.net/6v2Cm/5/

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

Filter out <li> elements by child data attribute

Below is an example of the HTML code I am working with: <li><div class="abc"><a href="https://www.google.com" data-test="male">John</a></div></li> <li><div class="abc"><a href="https://www.facebook.com" d ...

javascripthtml

HTML5 Drag and Drop: How to Stop Drag and Drop Actions from Occurring Between a Browser and Browser Windows

Is it possible to restrict HTML5 Drag & Drop functionality between different browsers or windows? I am currently working on an Angular2 app that utilizes native HTML5 Drag and Drop feature. Is there a way to prevent users from dragging items out of th ...

javascriptangularhtmldrag-and-drop

Continuously execute the scroll function as long as the cursor remains over the element

Is there a method to continuously execute a function while the cursor hovers over a specific DOM element? I need to trigger a scroll action whenever the user hovers over an arrow, with an optional timeout feature. This requirement must be met without utili ...

javascripthtmlcssangular

Monitor the scrolling progress across four separate HTML pages without the percentage decreasing when scrolling back up

I am in the process of developing an e-learning platform and I would like to include a scrolling indicator that visually represents the progress of pages read. The website consists of four HTML pages, with each page corresponding to 25% of the scroll bar. ...

javascripthtmlcss

Tips for determining the full width of a webpage, not solely the width of the window

While we can easily determine the width of the window using $(window).width(); This only gives us the width of the window itself, not accounting for any overflowing content. When I refer to overflowing, I mean elements that extend beyond the visible view ...

javascriptjqueryhtmlcss

HTML image vanishes once external jQuery link is incorporated

Although I have added an external link to my JavaScript file (<script type="text/javascript" src="script.js">) in the header of my HTML document, the image on my webpage mysteriously vanishes. HTML: <HTML> <HEAD> <link rel="st ...

javascriptjqueryhtmlimage

I'm having trouble getting my button to float correctly on the right side

Here I am facing a unique situation where I am attempting to align my button input[type="submit"] to the right side. I have allocated space for it and therefore trying to float the button to the right so that it can be positioned next to my input text. U ...

htmlcss

Troubleshooting: HTML drop-down menu experiencing malfunctions

As a newcomer to the realm of HTML, I am eager to kickstart my online portfolio. After successfully setting up the navigation bar, I have now turned my focus towards creating a dropdown menu within the nav bar. Unfortunately, I've hit a roadblock as t ...

htmlcss

Comprehensive JavaScript JSON details

As a newcomer to the world of Javascript, I've set myself the challenge of creating an online sales platform. To get started, I'm using the fakestore.com API to populate my site with products. Here's a snippet of my current JavaScript code: ...

javascripthtmlcss

CSS Background Image Properties

I'm struggling to display a background image on my HTML page. The image is saved in the same folder as the HTML file. <html> <head> <link rel="stylesheet" type="text/css" href="style/indexstyle.css" > <meta charset="ISO-8859-1"& ...

htmlcssbackground-image

After scrolling down, the navigation bar's menu button is no longer easily reachable

I am facing a challenge with my current website project. It seems that the navigation trigger button (the burger icon on the top left corner of the page) is only responsive when the page is at the very top. As soon as I scroll down even slightly, it stops ...

javascripthtmljquerycssresponsive-design

How can I address multiple buttons with various events using jQuery?

I am new to learning jQuery and I'm currently working on some exercises. However, I've run into an issue with two buttons in the DOM that are supposed to perform different actions. I can't seem to figure out how to assign different functions ...

javascriptjqueryhtmlforms

Tips for changing the visibility of content by combining various Bootstrap 4 display classes

Struggling to figure out a seamless way to toggle the display of a side navigation bar while incorporating multiple Bootstrap 4 display classes due to their heavy use of !important. For instance, consider this div using the display classes that I need to ...

javascriptjqueryhtmlcsstwitter-bootstrap

Facing compilation errors in Sass due to grid issues

@media (min-width: 40em) { .article__grid { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); } } @media (min-width: 64em) { .article__grid { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); ...

cssvisual-studio-codesassgrid

When a user clicks on a child element of an anchor tag, the function will

Is it possible to return a specific function when a user clicks on a child of an anchor element? <a href="/product/product-id"> I am a product <div> Add to favorites </div> </a> const handleClick = (event) =>{ ...

javascripthtmlreactjsdomnext.js

Encountering a Source map error in my React project: Issue arises from Error: request unsuccessful due to status

Encountering a Source Map Error with status 403 in my React project console I suspect the UseEffect hook is not functioning properly in displaying the list from the API response The API successfully returns the response as a list, but when iterating thro ...

javascripthtmlreactjsapibootstrap-4

I am struggling to get the images aligned properly on my HTML page. Can someone please advise on how to fix this issue?

On my HTML page, I have 2 div fields. Within each field, there are 5 images listed sideways. The issue is that the images in the div below are not lining up properly side by side. Given my limited frontend knowledge, how can I align them correctly? Here&a ...

htmlcss

Tips for styling an array of objects using mapping techniques

I have an array of messages and I am currently using the map() function. Each message in the array has two keys - one for the author and another for the message content. What I want to achieve is to change the styles of the div tag when displaying the last ...

javascripthtmlcssreactjs

Truncate a string in Kendo Grid without any white spaces

While using a Kendo-Grid for filtering, I've come across an issue where my cell does not display the full string if there is no white space. The problem can be seen in the image below: https://i.sstatic.net/0h1Sg.png For example, the string "https:/ ...

htmlcssangularfrontendkendo-grid

Is it possible to display a div when hovering over it and have it remain visible until

How can I make the div ".socialIconsShow" fade in when hovering over ".socialIcons", and then fade out when hovering over ".socialIconsShow"? Is there a way to keep the icons visible even after leaving ".socialIcons"? <div class="socialNetworks"> ...

jquerycsscss-sprites