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

Question

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

/deep/ .dropdown-toggle {
  font: normal normal normal 32px/48px Noto Sans CJK JP;
  background-color: #ffffff;
  text-align: left;
  color: #000000;
  width: 336px;
  height: 72px;
  border-radius: 16px;
  margin: 46px 48.05px 0px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;

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

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

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

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

Answer 1

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

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

.dropdown-toggle {
  font: normal normal normal 32px/48px Noto Sans CJK JP;
  background-color: #ffffff;
  text-align: left;
  color: #000000;
  width: 336px;
  height: 72px;
  line-height: 58px; /* 追加 */
  border-radius: 16px;
  margin: 46px 48.05px 0px 0px;
/*  display: flex;
  align-items: center;
  justify-content: space-between; */
  overflow: hidden;  /* 追加 */
  text-overflow: ellipsis; /* 追加 */
  position: relative;  /* 追加 */
  padding-right: 2rem;  /* 追加 */
}

/* 以下追加 */
.dropdown-toggle::after {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translatey(-50%);
}

CodePenサンプル