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

Tips for creating space between subheader elements within a Material UI cardHeader

This query pertains specifically to the subheader property of Material UI card header. It does not involve adding spaces to a JavaScript variable or in JSX. The current code snippet only adds one space before and after the period. I am looking to add more ...

reactjsmaterial-ui

Using localStorage item as query value in socket.io: A step-by-step guide

Goal To authenticate users through a socket.io connection by passing a token from localStorage. Following the instructions in the documentation, I have initialized io() outside of MyComponent and added the token as a query: const token = localStorage.getI ...

reactjssocket.iolocal-storage

What could be causing these transformed canvases to not display fully in Chrome at specific resolutions?

fiddle: https://jsfiddle.net/f8hscrd0/66/ html: <body> <div id="canvas_div"> </div> </body> js: let colors = [ ['#000','#00F','#0F0'], ['#0FF','#F00','#F0F&a ...

javascriptcssgoogle-chromehtml5-canvas

Handling Removal of Selected Option in React Material-UI Autocomplete Single Selection

I am currently using material UI autocomplete to create a single-select dropdown. However, I have encountered an issue wherein the onChange event does not get triggered when I click the close button on the right side of the input. This prevents my state fr ...

javascriptreactjsmaterial-uiautocompletedropdown

Using CSS :active can prevent the click event from firing

I've designed a navigation menu that triggers a jquery dialog box to open when a link is clicked. My CSS styling for the links includes: .navigationLinkButton:active { background:rgb(200,200,200); } To attach the dialog box, I simply use: $("#l ...

jquerycsseventsjquery-ui

Tips for utilizing Material UI's Tooltip feature alongside a TableRow

I'm currently facing an issue where I'm trying to include a MUI TableRow inside a Tooltip component in order to display a long uuid when hovering over the row. However, I noticed that all the columns of the row are being compressed into the first ...

javascriptreactjsuser-interfacematerial-ui

Formik Error: The property 'submitForm' is undefined and cannot be read

I followed the example provided in this link (I'm working with NextJS). However, when using useFormikContext, I encountered an error message saying "TypeError: Cannot read property 'submitForm' of undefined". The version of Formik I currentl ...

reactjsnext.jsformik

Tips for preventing breaks in typography

I have implemented a material ui Typography component, but it's causing a line break even though there is enough space. Here is the code snippet: <Box flexDirection="row"> <Typography> Gender: <RadioGroup row ...

javascriptcssreactjsmaterial-ui

Adjusting the size of a React element containing an SVG (d3)

In my simple react app, I have the following component structure: <div id='app'> <Navbar /> <Graph /> <Footer /> </div> The Navbar has a fixed height of 80px. The Footer has a fixed height of 40px. The Graph i ...

cssreactjsd3.jssvgresize

What is the best way to create extra space around elements without causing them to disappear off

Looking for a solution to add padding or margin to the right column of a two-column layout without pushing the content off screen? In my example, I've indicated where I would like the extra space to be with an arrow. When I try adding margin or paddin ...

css

Leverage the power of Laravel and ReactJS to beautifully display images

Currently, I am working on a project where I am incorporating ReactJS into a Laravel blade file. To get started, I included the React CDN and began writing code within the script tag. Everything seems to be going smoothly so far, however, I have encountere ...

javascriptphpreactjslaravel

Using TypeScript to send state through history.push({...})

I recently utilized the history.push method to redirect to a specific URL while passing along some information through the included state. Here's how I implemented it: const history = useHistory() history.push({ pathname: '/someurl/', ...

javascriptreactjstypescriptreact-router

AngularJS enables box to smoothly slide up and down when hovered over

I am attempting to create a div that will overlay an image on hover with a slide up and slide down effect. Can anyone provide guidance on how to achieve this without relying on jQuery? I would prefer to utilize only AngularJS in my application. Here is a ...

javascriptjquerycssangularjs

Guide on how to use a tooltip for a switch component in Material-UI with React

I am attempting to incorporate a tooltip around an interactive MUI switch button that changes dynamically with user input. Here is the code snippet I have implemented so far: import * as React from 'react'; import { styled } from '@mui/mater ...

javascriptcssreactjsmaterial-ui

Troublesome Suckerfish CSS Navigation Menus failing to function properly on IE7

Feeling completely exasperated, I am encountering issues with aligning the drop downs under the parent item in IE7. Despite functioning properly in all other browsers, including IE8, the drop down menu is not lining up correctly in IE7. In IE7, the drop d ...

cssinternet-explorer-7suckerfish

Setting up a Vercel deployment for a NX Monorepo project with React and Express

https://github.com/clearhost-cmd/helloapp I am facing challenges in deploying my NX Monorepo to Vercel. While the NX Monorepo runs smoothly on localhost without any issues, I'm encountering difficulties getting it to work on Vercel. There are no e ...

reactjsexpressvercelmonoreponx-monorepo

What is the best way to translate these CSS properties into Mui?

I am currently in the process of transitioning my CSS code to utilize MUI's sx prop and styled() function. However, I have not been able to find any documentation on how to properly convert the following code to MUI syntax. Can someone assist me with ...

htmlcssreactjsmaterial-ui

Retrieving data from an API using ReactJs

class Rnn extends Component{ constructor(props){ super(props); this.state={ x:[] } } componentWillMount(){ var api={ getroverss(){ var url="https://fcctop100.herokuapp.com/api/fccusers/top/recent"; return fetch(url).then((res) => res.json()); } ...

reactjs

Unfortunately, I am unable to utilize WebStorm in combination with React

Struggling to set up a React project in WebStorm, it's not running and ESLint isn't recognizing it. Started a new React project with Node.js v16: Successfully created the React project: Encountering issues as ESLint is not recognizing the ...

reactjseslintwebstormjetbrains-ideeslintrc

When a text is wrapped by an HTML div using absolute positioning, is there a way to prevent it from wrapping without relying on white space

I have a group of div elements positioned absolutely on the screen. If any div contains content that is too big for the screen, the browser wraps it into multiple lines to fit. However, I do not want this behavior. Instead, I want the overflowing content ...

javascriptjquerycsshtml