Is it possible to keep text truncated with an ellipsis and still have vertical text perfectly centered?

I need to achieve a design where the book-spine text is both visually centered and truncated inside the shelf. It should resemble the spine of a book. However, when the text in book-spine is too long, it should be cut off with an ellipsis.

  • In the case of book-spineFlex with display:flex;, the text is centered but not truncated.
  • With book-spineBlock and display:block;, the text is truncated but lacks centering.

How can I achieve both centered alignment and truncation for the book-spine within the shelf?

CSS code example...
HTML structure code example...

I have already attempted using flexbox without success (centered but no truncation). Trying to utilize position: relative and position: absolute led to truncation, but sacrificed the centering effect.

htmlcsscenteringtruncate

Answer №1

Replace align-items with align-content.

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Cambria', serif;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
  width: 80%;
  margin: auto;
}

@media (max-width: 768px) {
  .container {
    width: 90%;
  }
}

@media (max-width: 480px) {
  .container {
    width: 95%;
  }
}

.shelf {
  display: flex;
  justify-content: space-between;
  margin: auto;
  max-width: 500px;
}

.book-spineFlex {
  width: 45px;
  height: 150px;
  margin-right: 1px;
  background-color: #a0522d;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.book-spineBlock {
  width: 45px;
  height: 150px;
  margin-right: 1px;
  background-color: #a0522d;
  color: white;
  display: block;
  align-content: center;
  justify-content: center;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
<div class="wrapper">
  <div class="container">
    <div class="shelf">
      <div class="book-spineFlex">Sample title 1 w/ truncation</div>
      <div class="book-spineBlock">Sample title 1 w/truncation</div>
    </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

Having trouble accessing certain nodes while extracting HTML text with R

I have numerous water extraction permits that are accessible online and I am looking to extract specific data from them. For example url <- "https://www.ecan.govt.nz/data/consent-search/consentdetails/CRC000002.1" While I don't have a strong know ...

htmlrweb-scrapingrvest

Just finished my first webpage - can't seem to get the footer to stay put!

After spending 3-4 months learning HTML and CSS, I am now working on my first web page. However, I'm facing an issue where the footer is stuck to the slideshow and I can't seem to figure out how to position it at the bottom of the page. Any tips ...

htmlcss

`Issues with CSS/JQuery menu functionality experienced in Firefox`

After creating a toggleable overlay menu and testing it in various browsers, including Internet Explorer, everything seemed to work fine except for one major issue in Firefox (version 46). The problem arises when toggling the overlay using the "MENU" butt ...

javascriptjqueryhtmlcssfirefox

Displaying both input fields and buttons side by side on mobile devices using Bootstrap

I am in the process of creating a navbar that includes select, input, and button elements. Below is the code I have written: <nav class="navbar sticky-top navbar-light p-0"> <div class="collapse navbar-collapse search-bar show p-4" id="navbarSupp ...

csstwitter-bootstrapbootstrap-4

Encountered an error while attempting to load resource: the server returned a 404 (Not Found) status code when trying to load an image in an

I am looking to dynamically load an image when it is selected from a file picker dialog. The code provided below attempts to achieve this, however, the image does not load into the img tag. <script src="https://cdnjs.cloudflare.com/ajax/libs/jq ...

javascripthtml

Navigate through the list of options by scrolling and selecting each one until the desired element is

Hey, I've got this AngularJs directive that selects an item based on the "key-pressed" event, and it's working perfectly. The issue arises when there is a scroll bar since the elements get hidden, making it difficult for me to see them. You can ...

javascripthtmlcssangularjs

Is there any specific reason not to use a short HTML/CSS syntax like <div a b c></div>?

When it comes to writing HTML in less standard environments, such as a phonegap app where strict syntax and semantics are not crucial, I have developed a unique approach that works for me. I aim to keep my HTML code short and concise by using the followin ...

javascriptcsshtml

Angular 8 fails to retain data upon page refresh

I have a property called "isAdmin" which is a boolean. It determines whether the user is logged in as an admin or a regular user. I'm using .net core 2.2 for the backend and Postgre for the database. Everything works fine, but when I refresh the page, ...

javascripthtmlangulartypescript

Rendering React.js components as children of DOM elements

Trying my hand at creating a custom Map component includes the task of designing a unique Map Annotation. Here's an example of how a MapAnnotation component appears in the render function: <MapAnnotation title='Annotation' latitude={ 12.3 ...

javascripthtmlcssreactjs

Updating an HTML element by using the input value in a text field with JavaScript/jQuery

Although it may seem straightforward, I am new to Javascript and struggling to find or create the script I need. I have a list of BIN numbers for credit cards and want to extract the first 6 digits of the card number field to determine the type of card, an ...

javascriptjqueryhtml

Activate the textbox without utilizing `.focus()` method

I am encountering an issue with a small iframe on my page. The content within the iframe is larger than the window itself, requiring users to scroll around to view it in its entirety. Within this iframe, there is a button that, when clicked, triggers an an ...

javascriptjqueryhtmlformsiframe

Add navigation dots to the slider in order to align them with the specified div element

Visit this JSFiddle link for the code <html> <link href="./style.css" rel="stylesheet" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script&g ...

javascripthtmljquerycss

Having Trouble with Your CSS Styles?

After working with HTML and CSS for over 5 years, I find myself stumped by this particular issue. At the provided URL, there is a single div in that container with an ID of Clarity. The CSS rules I have implemented are as follows: #clarity { text-align: ...

htmlcss

What causes a slow disappearance of both the form element and its child elements when the visibility attribute is set to hidden on the

Have you ever noticed that the child elements of an element form hide slowly when using visibility:hidden, but hide quickly when using display:none? This slow hiding can negatively impact user experience. I tried to find information on this issue, but eve ...

cssangularforms

Capturing Vuejs data for various pathways

Currently, I am developing a Vue file that contains the following code: <router-link :to="{name: 'detailed'}" tag='li' @click='getData("test")'> testing</router-link> In the script section, the code looks like th ...

javascripthtmlvue.js

The nuSelectable plugin enhances the functionality of jQuery

I am currently experimenting with the jQuery nuSelectable plugin in order to enable users to select multiple items simultaneously. Unfortunately, I am encountering difficulties in making the selection work as intended. You can find the plugin here. After ...

javascriptjqueryhtmlcss

Creating a Curved Border with Clip Path in CSS

Hey there! I'm currently attempting to add a speech bubble at the bottom left using clip-path, but I'm struggling to adjust the pixels just right to achieve the clear and exact look I want. Can someone provide suggestions on how to accomplish thi ...

javascripthtmlcss

What are some ways to create a one-sided design without being limited by container constraints

How can I create a block on my site where there are no container restrictions on the right, but they are limited on the left? The goal is to have an image pressed against the right edge of the page while keeping the container limits on the left. Here is my ...

htmlcss

In Chrome browser, the orientation of the options in the datalist remains consistent

Is there a way to change the direction of the datalist's options to RTL? While I'm able to change the direction of the input element, the same doesn't apply to the options of the datalist. I've attempted setting the dir attribute to r ...

htmlcssgoogle-chrome

Switch the color of the final letter

Sample code snippet: <p class="test">string</p> Looking to dynamically change the color of the last letter, specifically the letter "g", using CSS only, without relying on JavaScript. I am displaying the string character by character and nee ...

htmlcss