Menu
I have a text that I need to rotate and truncate if it's too long:
But if I apply ellipsis on it:
overflow: hidden;
text-overflow: ellipsis;
The rotated text will be too short:
.box {
position: relative;
width: 300px;
}
.box-header {
position: absolute;
top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
padding: 10px;
font-weight: bold;
background: #ccc;
color: red;
min-width: 0;
}
.box-header > div {
transform: rotate(-90deg);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid red;
}
.box-content {
margin-left: 40px;
padding: 10px;
background: #eee;
}
.some-content {
height: 100px;
}<div class="box">
<div class="box-header">
<div>Too long header text</div>
</div>
<div class="box-content">
<div class="some-content">Some content</div>
</div>
</div>
775
A text-overflow property in CSS is used to specify that some text has overflown and hidden from view. The white-space property must be set to nowrap and the overflow property must be set to hidden. The overflowing content can be clipped, display an ellipsis ('…'), or display a custom string.
To clip at the transition between characters you can specify text-overflow as an empty string, if that is supported in your target browsers: text-overflow: ''; . This keyword value will display an ellipsis ( '…' , U+2026 HORIZONTAL ELLIPSIS ) to represent clipped text.
Rotate text can be done by using the rotate() function. We can rotate the text in clockwise and anti-clockwise direction. The rotate function can also rotate HTML elements as well.
The CSS ellipsis kind of is the value that mostly is used by the property: text-overflow. What is CSS Ellipsis? How to use CSS Ellipsis? How CSS ellipsis value is used by text-overflow property? Why text-overflow ellipsis doesn’t work? What is CSS Ellipsis?
The ellipsis is the 3 dots … Now the user can see the layout properly and thanks to the CSS ellipsis they’re aware that there’s more to the email addresses than is being shown. Note: this works only when the overflow and text-overflow properties are used together.
When a string of text overflows the boundaries of a container it can make a mess of your whole layout. Here’s a cool trick to handle text overflow by truncating long strings with a CSS ellipsis. During this quick tip we’ll use the following demo to show how text overflow works:
Consider writing-mode to switch the direction of the text then add height:100% to restrict the height and allow the ellipsis to work. Finally add a 180deg rotation to have the text like you want: The issue with your code is that the rotation will only do a visual transformation and will not really change the direction of the text.
Consider writing-mode to switch the direction of the text then add height:100% to restrict the height and allow the ellipsis to work. Finally add a 180deg rotation to have the text like you want:
.box {
position: relative;
width: 300px;
}
.box-header {
position: absolute;
top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
padding: 10px;
font-weight: bold;
background: #ccc;
color: red;
min-width: 0;
}
.box-header > div {
writing-mode:vertical-lr;
transform:rotate(180deg);
height: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid red;
}
.box-content {
margin-left: 40px;
padding: 10px;
background: #eee;
}
.some-content {
height: 100px;
}<div class="box">
<div class="box-header">
<div>Too long header text</div>
</div>
<div class="box-content">
<div class="some-content">Some content</div>
</div>
</div>
The issue with your code is that the rotation will only do a visual transformation and will not really change the direction of the text. The ellipsis/overflow will consider the code as if there is no rotation.
.box {
position: relative;
width: 300px;
}
.box-header {
position: absolute;
top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
padding: 10px;
font-weight: bold;
background: #ccc;
color: red;
min-width: 0;
}
.box-header > div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid red;
}
.box-content {
margin-left: 40px;
padding: 10px;
background: #eee;
}
.some-content {
height: 100px;
}<div class="box">
<div class="box-header">
<div>Too long header text</div>
</div>
<div class="box-content">
<div class="some-content">Some content</div>
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
