Skip to main content

¿Cómo forzarelforzar el texto solo en 2 líneas? usando CSS?

Origen Enlace
tsvetos
  • 13
  • 1
  • 4

¿Cómo forzarel texto solo en 2 líneas? CSS

Tengo esta tabla rellena con imágenes: introducir la descripción de la imagen aquí

Y quiero pasarlo a texto, pero no consigo juntar los textos en vertical en 2 líneas.

table {
    color: white;
    background-color: black;
    table-layout: fixed;
    height: 128px;
    width: 400px;
}

.vertAlign {
    writing-mode: vertical-rl;
    transform: rotate(180deg); 
}


.textStyle{
    text-overflow: ellipsis;
    font-size: 11pt;
}

div{
    vertical-align:text-bottom;        
    text-align: center;
    display: flex;
    position: absolute; 
}

.textAlign{
    width: 213.6px;
    vertical-align:bottom;
    text-align:center;
    padding-bottom: 3%;
    font-size: 18pt;
}

.one {
    width: 49.6px;
}
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="headers.css">
    </head>
    <table cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <th class="textAlign">&nbsp;Question</th>
            <th> <div><span class="vertAlign textStyle one">Answers Are Trending</span></div></th>
            <th> <div><span class="vertAlign textStyle two">Average Grade This Store</span></div></th>
            <th> <div><span class="vertAlign textStyle two">Average Grade This District</span></div></th>
            <th> <div><span class="vertAlign textStyle two">Average Grade Company-wide</span></div></th>
        </tr>
    </tbody>
    </table>
</html>

Esto es lo que he conseguido por ahora, pero no consigo juntarlos en 2 líneas ni que aparezcan los puntos suspensivos si no cabe el texto.

El tamaño total de la tabla es 400 x 180. El primer elemento es 213.6 x 128. El segundo 49.6 x 128 y los otros tres 45.6 x 128.