どのように私は要素の最小と最大の幅を制限していますか？

StackOverflow https://stackoverflow.com/questions/2193545

  •  25-09-2019
  •  | 
  •  

質問

私は周りに境界線を描きたいというテキストの行を持っています。現時点では、このようなマークアップになります。

<div id="titleBox"><span id="titleName" class="truncate">Really really long long long title name</span></div>

このようなスタイルのルックスます：

    #titleBox{
    margin-top: 10px;

}

#titleName{
    margin: 5px;
    height: 1.6em;
    width: auto;
    max-width: 15.385em;    
    padding: 0.369em;
    margin: 0.369em;
    line-height: 1.7;
    color: rgba(0,0,0,0.4); 
    background-color: rgba(204,204,204,0.4); 
    border: 3px solid rgba(255,255,255,0.14);
    font-size: 153.9%;
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;     
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;        
    -o-text-overflow: ellipsis;
    -moz-binding: url('../templates/ellipsis.xml#ellipsis');
}

は、私はたいという効果は、幅が一定の限度を超えない限り、私は、スタイルボックスは、テキストの幅になりたいということです。それから私は、幅が限定されるようにしたいと思うし、次に切り捨てクラスがでキックする必要があります。

唯一のdivを使用しての問題は、ボックスは、テキストの幅に折り返されていないということです。スパンを使用することができますが、それはブロックとして表示されません。ブロックは、プレーンDIVでそれを包むように同じ問題を示すように表示することを強制します。テキストが長すぎる場合スパンがdiv要素の境界を無視するためのdiv /スパンの組み合わせを使用すると、いずれかの動作しません。

テキストの幅を制限する方法は、テキストを囲むスタイル付きのボックスを切り捨てることを強制し、持っている、ありますか？

役に立ちましたか？

解決

私のコメントを1として、display:inline-blockは、所望の効果を与える必要があります。それはでは動作しません
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top