Question 244234 in CSS Question posted in
Some basic documentation can be found here.

Css – Is it possible to have Antd Typography.Paragraph multi row as Menu title?

How can i get multiple rows to work inside Antd Submenu? Only one row works fine, but as soon as i select multiple, ellipsis is not shown at all and text is still in one row.

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

2

Answers


  1. Chosen as BEST ANSWER
    0

    Using the following css, everything looks as intended

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

  2. 0

    Yes it’s possible. You just need to use style and lineBreak css prop:

    <Typography.Paragraph
  ellipsis={{
    rows: 2,
    tooltip: {
      title: "Long title",
      placement: "right"
    }
  }}
  style={{
    width: 100,
    lineBreak: "auto"
  }}
>
  A very very very long title that will break line into two or more rows
</Typography.Paragraph>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search