CSS 変換を使用して HTML テーブルのセル内のテキストを回転するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS 変換を使用して HTML テーブルのセル内のテキストを回転するにはどうすればよいですか?

Susan Sarandon

リリース： 2024-10-28 08:01:29

オリジナル

908 人が閲覧しました

How to Rotate Text in HTML Table Cells Using CSS Transforms?

HTML テーブルのセル内のテキストの回転

HTML テーブルは表形式データの整理と表示に広く使用されているため、セル内でテキストを回転する機能セルは、スペースに制約のある状況、特に長い見出しの場合に有益です。

CSS 変換の利用

HTML テーブル内のテキストを回転する堅牢で移植可能なソリューションは、CSS を使用することです。変身します。 CSS3 変換プロパティを使用すると、セルのレイアウトや機能を損なうことなく 90 度の回転を実現できます。次の CSS コードは、テキストを 7.5 度回転する方法を示しています。

<code class="css">.box_rotate {
    -moz-transform: rotate(7.5deg);
    -o-transform: rotate(7.5deg);
    -webkit-transform: rotate(7.5deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
}</code>

ログイン後にコピー

実装例

実装を説明するために、次の HTML コードを検討します。

<code class="html"><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
<div class="box_rotate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div></code>

ログイン後にコピー

この例では、box_rotate クラスが 2 番目の

に適用され、そのテキストが 7.5 度回転されます。その結果、その特定のセル内のテキストが垂直方向にレンダリングされ、表の列内で垂直方向に整列します。

以上がCSS 変換を使用して HTML テーブルのセル内のテキストを回転するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。