Tengo esta tabla rellena con imágenes: [![introducir la descripción de la imagen aquí][1]][1] Y quiero pasarlo a texto, pero no consigo juntar los textos en vertical en 2 líneas. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> 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; } <!-- language: lang-html --> <html> <head> <link rel="stylesheet" type="text/css" href="headers.css"> </head> <table cellspacing="0" cellpadding="0"> <tbody> <tr> <th class="textAlign"> 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> <!-- end snippet --> 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. [1]: https://i.sstatic.net/Twxtd.png