522

この単純な CSS が機能しない理由がわかりません...

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}
<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

4回目の「テスト」あたりで切り上げるべき

4

17 に答える 17

6

anchor, span... タグはデフォルトでインライン要素widthです. インライン要素の場合,プロパティは機能しません. inline-blockしたがって、要素をまたはblock level要素に変換する必要があります

于 2015-10-20T06:43:44.213 に答える
6

display: block;またはに追加display: inline-block;します#User_Apps_Content .DLD_App a

デモ

于 2013-07-22T03:16:37.683 に答える
5

私はこの問題を抱えていて、動的な幅で簡単に機能するソリューションが必要でした. ソリューションはcssグリッドを使用します。コードは次のようになります。

.parent {
  display: grid;
  grid-template-columns: auto 1fr;
}

.dynamic-width-child {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.fixed-width-child {
  white-space: nowrap;
}
<div class="parent">
  <div class="dynamic-width-child">
    iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii asdfhlhlafh;lshd;flhsd;lhfaaaaaaaaaaaaaaaaaaaa
  </div>
  <div class="fixed-width-child">Why?-Zed</div>
</div>

于 2021-02-23T08:53:26.237 に答える
2

1行のcssを追加するだけです:

.app a {
   display: inline-block;
}
于 2016-10-18T07:59:10.093 に答える
-2

float:left;このセレクター内に追加することもできます。

#User_Apps_Content .DLD_App a
于 2013-07-22T07:41:05.083 に答える