Work-break not working on side-tab

Question

I'm working a simple tab menu using ant design, I want to display the text in the tab menu vertically.

T

A

B

1

My problem is, I cant achieve that state.

SAMPLE CODE

.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-tab {
  height: 90px;
  line-height: 90px;
  margin: 0;
  padding: 0;
  width: 30px;
  -ms-word-break: break-all;
  word-break: break-all;
}

Possible duplicate of [Vertical Text Direction](https://stackoverflow.com/questions/4264527/vertical-text-direction) — abhiox, May 04 '18 at 08:05

score 1 · Answer 1 · answered May 04 '18 at 08:05

1

Try using the writing-mode property as mentioned here:

.ant-tabs-vertical > .ant-tabs-bar .ant-tabs-tab {
  height: 90px;
  margin: 0;
  padding: 0;
  width: 30px;
  -ms-word-break: break-all;
  word-break: break-all;
  writing-mode: tb-rl;
}

answered May 04 '18 at 08:05

abhiox

176
1
2
12

Should've left out the line-height as mentioned in my answer. – abhiox May 04 '18 at 09:54

score 1 · Accepted Answer · answered May 04 '18 at 09:03

1

Try adding white-space: normal; and deleting line-height: 90px;

answered May 04 '18 at 09:03

Vicky

141
1
2

Work-break not working on side-tab

2 Answers2