Can Antd's Typography.Paragraph be used as a multi-row Menu title?

I am having trouble getting multiple rows to work inside the Antd Submenu. When I select only one row, it works fine. However, when I try to select multiple rows, the ellipsis is not shown at all and the text remains in one row.

   <SubMenu
          title={
            <Typography.Paragraph ellipsis={{ rows: 2, tooltip: { title: 'Long title', placement: 'right' } }}>
              {'Long title'}
            </Typography.Paragraph>
          }
        >
          {submenuItems}
          )}
        </SubMenu>
cssreactjsantd

Answer №1

Achieving this is definitely feasible. All you have to do is utilize the style and lineBreak css properties:

<Typography.Paragraph
  ellipsis={{
    rows: 2,
    tooltip: {
      title: "Long title",
      placement: "right"
    }
  }}
  style={{
    width: 100,
    lineBreak: "auto"
  }}
>
  A lengthy title that will be split into multiple rows due to its length
</Typography.Paragraph>

Answer №2

After implementing the following css code, the design appears exactly as planned

.ellipsisWrapper {
    &.@{typography-prefix-cls} {
      margin-bottom: 0; // Eliminate default margins
    }
    white-space: initial;
    line-height: 1.2;
  }

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

HTML form submitting with a symbol illustration

I am currently facing an issue with my website. I would like to create a search button using the symbol from fontawesome (<i class="fas fa-search"></i>), but I am unsure how to replace the form submission button with this symbol in order to sub ...

htmlcssforms

There seems to be an issue with the zebra striping in the rich:datatable component when using the rowClasses

I'm attempting to give my table a "zebra" color pattern for the rows, but it seems like the rowClasses attribute isn't functioning properly (edit: I don't see any colors applied to the table at all). Here is how I defined the styles: <s ...

cssrichfaceszebra-striping

Managing State in React using Maps

As someone who is new to coding, I am currently facing an issue and seeking help to resolve it. I am using axios to retrieve a JSON file and store it in a state utilizing Redux for form population. I am then utilizing .map() to break down the array and dis ...

javascriptjsonreactjsstate

"Creating a custom navigation bar with full width and navigation corners on both left

I am struggling to make my website's navbar stretch to the edges of the container while maintaining full width. I have added left and right padding to each navigation item, but in smaller laptop resolutions, the items break onto a new line, which is n ...

htmlcssbootstrap-4

Sitemap with dynamic generation - only pages listed on the sitemap are declared

I am currently working on generating dynamic URLs for each slug, but I am facing an issue where there is only an array with predefined pages that I have declared: const pages = ["/", "/about", "/portfolio", "/blog"]; http://localhost:3000/api/my-sitemap. T ...

reactjsnext.jsseo

Top method for waiting for material-ui ripples to finish before capturing snapshots

Seeking expert advice from the React Testing Library community on ensuring completion of a Material UI ripple animation before taking a snapshot. We've been experiencing inconsistent test results with our CI servers due to the animation finishing fas ...

reactjsjestjsmaterial-uireact-testing-library

Can you explain the distinction between ' &:hover' and ' & :hover' pseudoclass selectors?

While styling a Material-UI Button, I encountered an unexpected behavior when adding hover effects. When using & :hover, only the inner span of the button was affected. However, when using &:hover, the desired style was achieved. What is the diff ...

csssassmaterial-ui

What is the method for displaying the value of a textarea?

I am relatively new to the world of coding, but I have already delved into HTML, CSS, and basic DOM scripting. My goal is simple - I want to create a comment box where people can leave messages like in a guestbook. However, when I input text and click on ...

javascripthtmlcss

Anchor link fails to navigate to corresponding ID tag on different page

After spending a full day trying to understand this issue, I still haven't been able to find a solution. Here is the link to my web application that I'm currently working on: This particular bug seems to only occur in Safari. Please use Safari t ...

reactjssafarinext.js

Tips for Transitioning a Div Smoothly Upwards with CSS!

This is the code that relates to the title: #main { float: left; width: 20%; height: 10vh; margin-top: 10vh; margin-left: 40%; text-align: center; } #k { font-family: Questrial; font-size: 70px; margin-top: -7px; ...

htmlcsscss-transitions

The attempt to access https://registry.npmjs.org/expo-template-blank was unsuccessful due to a connection timeout error with the IP address 104.16.21.35 on port 443

Encountered an issue when attempting to initialize the project using expo init rn-first-app. Could you provide some assistance with this problem? ...

reactjsreact-nativeexpo

Issue: When calling setState(...), you must provide either an object containing the state variables to update or a function that will return an object with the updated

Encountering an error in the else section with this.state.incorrect + 1 and this.state.correct + 1 I've come across a similar issue that wasn't resolved by visiting this link: React Native: setState(...): takes an object of state variables to up ...

javascriptreactjsreact-reduxreact-router

What is the best way to vertically align an h1 heading in the content area of

I attempted to center my h1 within the body tag using the following code: h1 {margin:0 auto} http://jsfiddle.net/qPDwY/ However, it did not appear to center. What steps can I take to correct this issue? ...

csshtml-heading

Dropdown menu featuring a customizable input field

Is it possible to have a drop-down list with an input textbox field for creating new items in the same dropdown menu? ...

javascriptjqueryhtmlcssbootstrap-4

CSS3 animations can sometimes result in incorrect element sizing due to the animation-fill-mode property

After experimenting with CSS3 animation, I encountered an unusual issue. Adding animation-fill-mode to the "parent" <div> caused the width of the "child" <div> to be less than 100% upon completion of the animation. Can anyone shed light on why ...

cssanimation

Automatically adjust sizes with div elements

How can I automatically resize this iframe within a div? My current method is not effective. <iframe src="http://www.gamepuma.com/external.html?http://data.gamepuma.com/games/06/crash-bandicoot.swf" width="600" height="400" frameborder="0" margin ...

csshtml

Using @at-root seems to be causing an error when combining the "a" selector with

I encountered an issue when attempting to use @at-root and Interpolation in my Sass code. Despite using a standard example for testing, I still receive an error: .button { @at-root a#{&} { color: green; } } Error sass/Site.scss (Line 28 of s ...

cssrubywindowssasscompass

Ways to create a vertical bottom-up tree view using d3.js

I am trying to create a reverse tree view, starting from the bottom and moving up. What modifications do I need to make? Here is the link to my JS Fiddle: ...

javascriptjquerycssd3.jssvg

The concept of "HTML paragraph shifting"

I am looking to implement a feature similar to paragraph sliding, but I am struggling to explain it clearly. For demonstration purposes, I have added it to my website for you to view. Please note that it may take some time to load. The paragraphs slide s ...

javascripthtmljquerycss

In a React application, adjusting the main container height to 100vh results in the window.scrollY position being set to

I was facing problems with flashing on the Safari/Firefox browsers. By setting the main container height to max-height: 100vh, I managed to resolve the flickering issue. However, I am also looking for a solution to keep track of the window.scrollY positi ...

cssreactjsfirefoxsafariflicker