bootstrap の dropdown のテキスト部分のスタイルを変えたい

以下のようにbootstrapのdropdownのスタイルを上書きしていますが、テキストの部分文字数が多くてはみ出す場合に3点リーダーになるようにしたいです。

css
1/deep/ .dropdown-toggle {
2  font: normal normal normal 32px/48px Noto Sans CJK JP;
3  background-color: #ffffff;
4  text-align: left;
5  color: #000000;
6  width: 336px;
7  height: 72px;
8  border-radius: 16px;
9  margin: 46px 48.05px 0px 0px;
10  display: flex;
11  align-items: center;
12  justify-content: space-between;

下記公式のサイトのドロップダウンのhtmlをいじって文字数を増やしてみても
https://getbootstrap.jp/docs/5.0/components/dropdowns/

下記の様になります。（.dropdown-toggleのwidthは固定する）

元々下記のような見た目で下矢印も出ていますが、この文字幅を固定して3点リーダ（text-overflow: ellipsis）を効かせたいです。

しかしこのドロップダウンの文字部分にCSSをうまく当てられず困っております。
どうすれば良いかご教示いただけますでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

display: flex;があるとext-overflow: ellipsis;が無効になるので、削除。
上下中央配置は、line-heightで。heightから、上下パティングと境界線幅を引いた値を設定。
Bootstrapでは、下矢印は、::after疑似要素で表現しているので、position: absolute; で絶対配置にする。

というようなことで、下記のような感じでどうでしょう。

css
1.dropdown-toggle {
2  font: normal normal normal 32px/48px Noto Sans CJK JP;
3  background-color: #ffffff;
4  text-align: left;
5  color: #000000;
6  width: 336px;
7  height: 72px;
8  line-height: 58px; /* 追加 */
9  border-radius: 16px;
10  margin: 46px 48.05px 0px 0px;
11/*  display: flex;
12  align-items: center;
13  justify-content: space-between; */
14  overflow: hidden;  /* 追加 */
15  text-overflow: ellipsis; /* 追加 */
16  position: relative;  /* 追加 */
17  padding-right: 2rem;  /* 追加 */
18}
19
20/* 以下追加 */
21.dropdown-toggle::after {
22  position: absolute;
23  right: .75rem;
24  top: 50%;
25  transform: translatey(-50%);
26}