【overflow:hiddenについて】全て半角文字の場合、要素が伸びてしまう

overflow:hiddenを設定した要素のコンテンツを全て半角英数字にした場合、
文字のはみ出しは無くなりますが、こちらが指定した幅以上に要素が伸びてしまいます。
解決方法などご存知でしたらご教授をよろしくお願いします。

実現したいこと

・文字がはみ出さない（はみ出した部分は表示させない）
・指定した幅を超ない（要素が伸びない）

画像

ソースコード

<body>
    <div class="row">
        <div class="cell">
            <!-- 全て半角 -->
            <div class="event">abcdefghijklmnopqrstu</div>
        </div>
        <div class="cell">
            <!-- 全て全角 -->
            <div class="event">ＡＢＣＤＥＦＧＨＩＪ</div>
        </div>
        <div class="cell">
            <!-- 全半角混在 -->
            <div class="event">ＡbＣdＥfＧhＩjＫ</div>
        </div>
        <div class="cell">
            <div class="event"></div>
        </div>
    </div>
</body>

<style>
.row{
    background-color: #aaf;
    display: flex;
    width: 320px;
    height: 60px;
}
.cell{
    flex:1;
    height: 50%;
    background-color: skyblue;
    border:1px solid gray;
}
.event{
    background-color: #afa;
    height: 15px;
    width:95%;
    font-size: 7px;
    overflow: hidden;
}
</style>

行動規範の内容に同意します

回答1件

ベストアンサー

ご提示のコードにはoverflow: hiddenが見当たりませんでしたが、文字を折り返したい、という意味でいいでしょうか？

css
1.event {
2	word-break: break-all;
3}

投稿2022/03/31 06:45

Lhankor_Mhy

総合スコア37493

kta1234

2022/03/31 07:00 編集

ご指摘ありがとうございます。ソースに誤りがあったので、更新いたしました。 ```css  .event{ background-color: #afa; height: 15px; width:95%; font-size: 7px; overflow: hidden; } ```

Lhankor_Mhy

2022/03/31 07:01

文字の折り返しをしたい、ということでいいんですよね？

miyabi_pudding

2022/03/31 07:02

質問本文のソースコードを修正してください。質問本文は修正可能です。

kta1234

2022/03/31 07:06 編集

@Lhankor_Mhy 折り返すのではなく、要素（eventクラス）の幅を変えない＆はみ出た部分を表示させないようにしたいです。

kta1234

2022/03/31 07:07

@miyabi_takatsuk 先ほど修正したのですが、反映されていないでしょうか？

Lhankor_Mhy

2022/03/31 07:11 編集

.event の幅は指定されていないですよね……？あえていうなら、0 に指定されてはいますが……

Lhankor_Mhy

2022/03/31 07:12

もしかして、 width: 320; ↓ width: 320px; とか、そういう話……？

kta1234

2022/03/31 07:18

@Lhankor_Mhy ・.event の幅は「width:95%;」です。・「width: 320;」については、載せたソースが間違っていました。申し訳ありません。

Lhankor_Mhy

2022/03/31 07:32

回答の通りでいいと思うけどなあ…… 何か別の手段を考えるか……

Lhankor_Mhy

2022/03/31 07:43

どういう状態が理想でしょうか？各アイテムが同じ幅になってほしいということでしょうか？

kta1234

2022/03/31 07:45

@Lhankor_Mhy ご回答頂いた「word-break: break-all;」を下記の通りソースに追加したところ解決しました！上記を設定することにより、文字が幅を超える場合に改行されるようになるのですね。ありがとうございました。 ```css .event{ background-color: #afa; height: 15px; width:95%; font-size: 7px; overflow: hidden; /* 追加 */ word-break: break-all; } ```

Lhankor_Mhy

2022/03/31 07:47 編集

え、結局折り返しでよかったんですか？今までのやり取りは何だったんだろう…… なんにせよ、ご解決されて何よりです。

kta1234

2022/03/31 07:58

@Lhankor_Mhy 当初、以下のように修正して試してたため質問の意図を正しく理解できていませんでした。申し訳ありませんでした。 overflow:hidden→削除 word-break: break-all;→追加 ※この場合ただ改行されただけになる

Lhankor_Mhy

2022/03/31 08:07

なるほど……言葉が足りず、すみませんでした。

行動規範の内容に同意します