iyuya0623さん、こんにちは。
WordPress と言うより単純に CSS の話だと思いますので、回答が付きづらいかもです。例えば以下のような方法ではいかがでしょうか(未検証)。
<table>
<tr><td><p>abcdefghijklmn</p></td></tr>
</table>
table tr td p {
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
他に良い方法があるような気もしますが… CSS 等のフォーラムで聞いてみると良いのではないでしょうか。
ご参考になれば。
ご回答ありがとうございます!
まだCSSを触ったことがなく、このコードはどこに貼り付ければいいのでしょうか?
初歩的なことですみません…
こんにちは。
残りの文字を消して「…」などで表示するようにしたいです。
これを行ってしまうと、ユーザーが必要な情報を視認できなくなるのではないかと懸念しています。
もし、Flexible Table Block プラグインの事を言っているのでしたら、モバイルでスクロールするように設定してみてはどうでしょうか。「テーブルの横幅」の値は、適宜調整してみて下さい。
https://gyazo.com/83fbd245cd09709e3ea137d1268c221b
ご返事ありがとうございます。
テーブルの横幅を変更して、スクロールする方法も考えたのですが、やはり1画面内に表示させたいです。
また、表の中の文字はそこまで重要ではなく、補助的なものなので「…」でいいかなと考えています。
そのCSSを書く場所と、flexible tableのセレクタ名を教えていただければ幸いです。
それでは、アプローチの一例を記載します。
- ブロックのサイドバーから「表のセル幅を固定」をオンに
- 以下のCSSを記載
.wp-block-flexible-table-block-table th,
.wp-block-flexible-table-block-table td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
おそらくお使いのテーマはクラシックテーマだと思うので、「外観 > カスタマイズ > 追加CSS」に上記CSSを記載して下さい。
ただし、この設定は全てのFlexible Table Blockに影響します。特定のブロックに適用したい場合は、ブロックに追加CSSクラスを適用の上、上記コードのセレクタを適宜調整して下さい。
この辺りは、WordPressの使い方やCSSの基本的な話となるので、ご自身で一度勉強されてみても良いかと思います。
ありがとうございます!
うまくCSSが反映されました。
今までサポートしていただき、ありがとうございました。