13

画面の反対側に 2 つのボタンが浮かんでいますが、画面が縮小した場合にそれらがうまく折りたたまれるようにしたいと考えています。視覚的に、これは私が欲しいものです:

________________________________________________________________
|                                                               |
|   |LongTextButtonName|                 |LongTextButtonName|   | When the screen
|_______________________________________________________________| is large

_______________________________________
|                                      |
|   |LongTextBu...|  |LongTextBu...|   | When the screen is small
|______________________________________|

残念ながら、今私はこれを得ます：

________________________________________
|                                       |
|   |LongTextButtonName|                |
|                |LongTextButtonName|   | 
|_______________________________________|

CSSのみのソリューションが欲しいです。

これが私の現在のhtmlとcssです（そしてここにフィドルがあります）：

<div class="button-container">
  <div class="left-button"><a>LongTextButtonName</a></div>
  <div class="right-button"><a>LongTextButtonName</a></div>
</div>

.button-container {
  min-width:320px;
}
.button-container > div {
  border: 1px solid gray;
  background-color: orange;
  min-width: 160px;
  padding: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.left-button {
  float: left;
}
.right-button {
  float: right;
}
4

1 に答える 1

12

以下のフィドルは、以下に基づいて機能します。

  • オーバーフローと省略記号をトリガーするには、コンテナーに幅が必要です。
  • ボックスを継続的に折りたたむことができるように、パーセンテージ幅を使用しました。
  • パディングを説明するために、私はCSS3を使用しましたbox-sizing:border-box;

box-sizing:border-box;のため、このソリューションは古いブラウザでは機能しないことに注意してください。

.button-container {
  min-width:320px;
}
.button-container > div {
  border: 1px solid gray;
  background-color: orange;
  max-width: 50%;
  padding: 8px;
  white-space: nowrap;
  overflow: hidden;
  box-sizing:border-box;
  text-overflow: ellipsis;
}
.left-button {
  float: left;
}
.right-button {
  float: right;
}

http://jsfiddle.net/UfxgZ/1/

于 2013-01-06T16:05:09.037 に答える