时间戳

首页 > 解决方案 > CSS - Flexbox crops left and right part when resizing

css - CSS - Flexbox crops left and right part when resizing

问题描述

.d1 {
  background-color: lightblue;
  display: flex;
  justify-content: space-evenly;
  padding: 20px;
  width: 150px;
}
.d1 div {
  background-color: yellow;
  flex: 1;
  font-size: 20px;
  margin: 5px;
}
<div class="d1">
  <div>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</div>
  <div>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</div>
  <div>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</div>
</div>

I use the above code to display 3 divs in a row and this works fine on a full screen. But on a resized window of width: 150px for example, it crops the left and right part. I tried to use overflow: hidden but the cropping remains. How could I fix this?

标签： cssflexbox

解决方案

裁剪的发生是因为单词不能被打破以进一步缩小 flex 元素。有这样的方法来解决这个问题：隐藏溢出，word-break: break-all;和flex-wrap: wrap;。看片段：

body {
    width: 200px;
}
.d {
    background-color: lightblue;
    display: flex;
    justify-content: space-evenly;
    padding: 20px;
    overflow: hidden;
}
.d > div {
    background-color: yellow;
    flex: 0 1;
    flex-grow: 2;
    font-size: 20px;
    margin: 5px;
}

.d1 {
    overflow: hidden;
}

.d2 > div {
    word-break: break-all;
}

.d3 {
    flex-wrap: wrap;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>It's <code>overflow: hidden;</code>
<div class="d d1">
    <div>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</div>
    <div>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</div>
    <div>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</div>
</div>
<hr>
<h2>It's <code>word-break: break-all</code>
<div class="d d2">
  <div>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</div>
  <div>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</div>
  <div>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</div>
</div>
<hr>
<h2>It's <code>flex-wrap: wrap</code>
<div class="d d3">
  <div>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</div>
  <div>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</div>
  <div>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</div>
</div>
</body>
</html>

推荐阅读