html - Boostrap: テキストが div からはみ出す

Question

ページをフルスクリーンで表示すると正常に動作する次のマークアップがあります

、しかし、ブラウザの幅を減らすと、divからこぼれます。

パネル本体で white-space: normal を使用しましたが、機能しません。text-overflow: 省略記号も何もしません。ブートストラップを使用しています。

<div class="col-sm-4">
    <section class="panel" style="background:#e74c3c; color:#FFF;">
        <div class="panel-body">
            COMPLAINT<br>
            8
        </div>
    </section>
</div>

.col-sm-4 {
    width: 33.33333333333333%;
}

.panel-body {
    padding: 15px;
}

.panel {
    margin-bottom: 15px;
    background-color: #ffffff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.05);
    box-shadow: 0 1px 1px rgba(0,0,0,0.05);
}

Answer 1

機能するには、その要素に設定をtext-overflow: ellipsis追加する必要があります。overflow: hidden

jsFiddle デモ

.panel-body {
    text-overflow: ellipsis;
    overflow: hidden;
}

Answer 2

を付ける必要がありますがword-wrap: break-word;、.panel-bodyこれによりテキストが非常に読みにくくなる場合があります。またはmin-width、コンテナに を配置して、コンテナが.col-sm-4小さすぎてテキストが収まらないようにすることもできます。

Answer 3

word-break break-all を使用すると、単語が途切れてパーセンテージ値で適切な幅を指定できる場合、問題は text-overflow:ellipsis を使用することを意味します。

例：

.col-sm-4 {
  width: 30%;
  display: inline-block;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
}