LoginSignup
0
0

More than 1 year has passed since last update.

[salesforce] table 文字列の折り返しを表現する

Posted at
aura.cmp
<td class="slds-table td-fixed-width" >
    <div class="slds-cell-wrap">
        nagai〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
    </div>
</td>
style.css
.td-fixed-width {
    width: 10rem;
}

tdの幅を固定した後、"slds-cell-wrap" tagにより、文字列の折り返しが可能になる。

slds-cell-wrap

スクリーンショット 2021-08-04 13.39.00.png

overflow-wrap: break-word;

overflow-wrap は CSS のプロパティで、インライン要素に対して、テキストが行ボックスをあふれないように、ブラウザーが不可分の文字列の途中で改行を入れるかどうかの設定を適用します。
https://developer.mozilla.org/ja/docs/Web/CSS/overflow-wrap
これも使える

[参考url]
https://www.lightningdesignsystem.com/components/data-tables/
https://salesforce.stackexchange.com/questions/270162/using-slds-td-in-a-table-has-overflowing-text-area-i-need-it-to-wrap

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0