Is Vertical Text-Overflow Possible with CSS3

Is vertical text-overflow possible with css3?

Currently there is no cross-browser CSS-only way to achieve such behavior.

You can do this now only in webkit-based browsers by using the -webkit-box and -webkit-line-clamp, see http://jsfiddle.net/ArKeu/7/

The css rule boils down to:

your-css-selector {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
}

Where the number value for -webkit-line-clamp is the maximal number of lines you want to be displayed.

Prevent vertical overflow with CSS

It looks like you need to add overflow: hidden and white-space: nowrap.

The text won't be truncated unless it doesn't wrap, which is why you needed white-space: nowrap and an overflow value other than visible.

.truncated-filename {  border: 1px solid;  display: inline-block;  max-width: 100px;  text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden;}

<span class="truncated-filename">10128-teach-vector.png</span>

CSS - Rotated text with overflow ellipsis

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>

Animate CSS Text To Go From Horizontal To Vertical With Upright Text

This snippet is an exact copy of yours except the spans are made inline-block so they obey the transform:

<!DOCTYPE html>
<html>

<head>
  <style>
    .move {
      font-size: 105px;
      position: relative;
      animation: mover 5s ease 0s normal forwards;
    }
    
    .move span {
      position: relative;
      display: inline-block;
      animation: rotate 5s ease 0s normal forwards;
    }
    
    @keyframes mover {
      0.0% {
        transform: scale(1) translate(-0px, 0) skew(0deg);
      }
      100% {
        transform: scale(1) translate(-20%, 300px) skew(0deg) rotate(90deg);
      }
    }
    
    @keyframes rotate {
      0.0% {
        transform: scale(1) translate(-0px, 0) skew(0deg);
      }
      100% {
        transform: scale(1) translate(0px, 0px) skew(0deg) rotate(-90deg);
      }
    }
  </style>
</head>

<body>

  <CENTER>
    <h2 class="move">

      <span>L</span>
      <span>E</span>
      <span>M</span>
      <span>O</span>
      <span>N</span>

    </h2>
  </CENTER>


</body>

</html>

How can I draw vertical text with CSS cross-browser?

Updated this answer with recent information (from CSS Tricks). Kudos to Matt and Douglas for pointing out the filter implementation.

.rotate {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);

  /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  /* Should be unset in IE9+ I think. */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Old answer:

For FF 3.5 or Safari/Webkit 3.1, check out: -moz-transform (and -webkit-transform). IE has a Matrix filter(v5.5+), but I'm not certain how to use it. Opera has no transformation capabilities yet.

.rot-neg-90 {
  /* rotate -90 deg, not sure if a negative number is supported so I used 270 */
  -moz-transform: rotate(270deg);
  -moz-transform-origin: 50% 50%;
  -webkit-transform: rotate(270deg);
  -webkit-transform-origin: 50% 50%;
  /* IE support too convoluted for the time I've got on my hands... */
}

CSS Text orientation : vertically oriented to the right

sideways isn't supported by all the browser. Instead you can replace it with a scale transformation

div {  writing-mode: vertical-rl;  /*text-orientation: sideways;*/  transform:scale(-1);}

<div>dimanche</div>

CSS3 text-overflow on a 90 degree rotated table heading

The solution is that I've added another div which contains the text.
then I take the height from the tr element and put it as the width of the text div. This will calculate the correct text overflow length.

here the corrected version
http://jsfiddle.net/rpQew/

the new css class:

.overflow{
        top:5px;
        position:relative;
        display:inline-block;
        width: 150px;
        text-align: left;
        padding-left: 5px;
        padding-right: 5px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

the table:

<table border="1">
<tr id="tableRow">
    <th class="positionFix"><div class="rotate"><div class="overflow">item 1 Test text text-overflow test</div></div></th>
    <th class="positionFix"><div class="rotate"><div class="overflow">item 2 more text foo bar faz</div></div></th>
    <th class="positionFix"><div class="rotate"><div class="overflow">item 3 foo bar foo bar foo bar foo bar foo</div></div></th>
</tr>
<tr>
    <td>entry 1</td>
    <td>entry 2</td>
    <td>entry 3</td>
</tr>
</table>

and the js:

var rowHeight = $('#tableRow').height();
$('.overflow').width(rowHeight+'px');

CSS related to overflow - What is analogous to text-overflow for html elements?

I got the answer from How can I hide extra divs with an ellipsis?

.abcd {
    display: block;
    border: 1px solid;
    max-width: 140px;
    padding: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.abcd .abc {
    display: inline;
    overflow: hidden;
    text-overflow: ellipsis;
}

Is Vertical Text-Overflow Possible with CSS3