html - 如何使用html和bootstrap在一行中旋转文本？

Question

我想在第一行旋转一些文本。发生的事情是结果显示文本为 2 行，而我想将其合并为 2 行。我应该添加什么？

非常感谢

p {

width: auto;

height: auto;


/* Rotate div */

-ms-transform: rotate(270deg); /* IE 9 */

-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */

transform: rotate(270deg);

}

<table class="table table-bordered primary-color white-text">
                <thead >
                    <tr>
                        <th height="200" style="width: 390px;">Point Description</th>   
                        <th><p>Controller Address</p></th>
                        <th><p>Module Address</p></th>
                        <th><p>Point Address</p></th>                    
                    </tr>
                </thead>
              
            </table>

标签： htmlcss

Answer 1

非常简单 - 只需添加类和不间断空格：

<th height="200" style="width: 390px;" class="rotated">Point Description</th>   
<th class="rotated"><p>Controller&nbsp;Address</p></th>
<th class="rotated"><p>Module&nbsp;Address</p></th>
<th class="rotated"><p>Point&nbsp;Address</p></th>

在 CSS 中：

.rotated {
    -ms-transform: rotate(270deg); /* IE 9 */
    -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
    transform: rotate(270deg);
}