CSS 调整大小时溢出

Question

我用 CSS 制作了一张简单的卡片。我试图让它响应，但是当我使用 DevTools 调整尺寸时，卡片溢出整个页面。 我知道溢出属性会阻止这种情况，但我认为存在更好的设计方法。

问题：这是卡片的标准外观

这是我调整大小时卡片的外观：

我怎样才能防止这种情况发生？ 或者至少让它们看起来不错？

HTML：

 <body>
    <div class="container">
      <div class="card">
        <span class="circle">
          <svg width="17" height="16" xmlns="http://www.w3.org/2000/svg">
            <path
              d="m9.067.43 1.99 4.031c.112.228.33.386.58.422l4.45.647a.772.772 0 0 1 .427 1.316l-3.22 3.138a.773.773 0 0 0-.222.683l.76 4.431a.772.772 0 0 1-1.12.813l-3.98-2.092a.773.773 0 0 0-.718 0l-3.98 2.092a.772.772 0 0 1-1.119-.813l.76-4.431a.77.77 0 0 0-.222-.683L.233 6.846A.772.772 0 0 1 .661 5.53l4.449-.647a.772.772 0 0 0 .58-.422L7.68.43a.774.774 0 0 1 1.387 0Z"
              fill="#FC7614"
            />
          </svg>
        </span>
        <h2>How did we do?</h2>
        <p>
          Please let us know how we did with your suppoer request. All feedback
          is appreciated to help us improve our offering!
        </p>
        <div class="rating">
          <span class="circle">1</span>
          <span class="circle">2</span>
          <span class="circle">3</span>
          <span class="circle">4</span>
          <span class="circle">5</span>
        </div>
        <button class="btn">SUBMIT</button>
      </div>
    </div>
  </body>

CSS：

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Overpass:wght@400;700&display=swap");

:root {
  --mobile-width: 375px;
  --desktop-width: 1440px;
  --btn-hover: hsl(0, 0%, 100%);
  --rating-hover: hsl(217, 12%, 63%);
  --body-background: #121417;
  --card-background: #252d37;
  --p-font-size: 15px;
  --p-color: hsl(216, 12%, 54%);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family: "Overpass", sans-serif;
  font-size: 15px;
}

.container {
  width: 100%;
  height: 100%;
  background-color: var(--body-background);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* overflow: scroll; */
}

.card {
  width: 20rem;
  background-color: var(--card-background);
  padding: 20px;
  border-radius: 15px;
  max-width: calc(100% - 2rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}

.card > * {
  margin-bottom: 1rem;
}

.card h2 {
  color: var(--btn-hover);
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 700;
}

.card p {
  color: var(--p-color);
  font-size: 15px;
  font-weight: 100 !important;
}

.card .rating {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.card .circle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #30363f;
  width: 2.5rem;
  height: 2.5rem;
  text-align: center;
  border-radius: 50%;
  color: var(--p-color);
}

Answer 1

首先，您的什么设备的视口宽度为88 像素？ 那不小，特别小。 甚至智能手表也比这更大。

在分析您的代码后，为了使其适合如此小的屏幕，您需要调整溢出的每个部分：

你的分页/评级需要一个flex-wrap: wrap;
卡片的文字需要被打断，所以你可以使用word-break: break-all; 或hyphens: auto;

 @import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Overpass:wght@400;700&display=swap"); :root { --mobile-width: 375px; --desktop-width: 1440px; --btn-hover: hsl(0, 0%, 100%); --rating-hover: hsl(217, 12%, 63%); --body-background: #121417; --card-background: #252d37; --p-font-size: 15px; --p-color: hsl(216, 12%, 54%); } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; font-family: "Overpass", sans-serif; font-size: 15px; }.container { width: 100%; height: 100%; background-color: var(--body-background); display: flex; flex-direction: column; align-items: center; justify-content: center; /* overflow: scroll; */ }.card { width: 20rem; background-color: var(--card-background); padding: 20px; border-radius: 15px; max-width: calc(100% - 2rem); display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; }.card > * { margin-bottom: 1rem; }.card h2 { color: var(--btn-hover); font-weight: 700; letter-spacing: 2px; font-size: 700; }.card p { color: var(--p-color); font-size: 15px; font-weight: 100;important: /* ADDED HERE */ hyphens; auto. }.card:rating { display; flex: justify-content; space-between: gap; 1rem: /* ADDED HERE*/ flex-wrap; wrap. }.card:circle { display; inline-flex: justify-content; center: align-items; center: background-color; #30363f: width. 2;5rem: height. 2;5rem: text-align; center: border-radius; 50%: color; var(--p-color); }

 <body> <div class="container"> <div class="card"> <span class="circle"> <svg width="17" height="16" xmlns="http://www.w3.org/2000/svg"> <path d="m9.067.43 1.99 4.031c.112.228.33.386.58.422l4.45.647a.772.772 0 0 1.427 1.316l-3.22 3.138a.773.773 0 0 0-.222.683l.76 4.431a.772.772 0 0 1-1.12.813l-3.98-2.092a.773.773 0 0 0-.718 0l-3.98 2.092a.772.772 0 0 1-1.119-.813l.76-4.431a.77.77 0 0 0-.222-.683L.233 6.846A.772.772 0 0 1.661 5.53l4.449-.647a.772.772 0 0 0.58-.422L7.68.43a.774.774 0 0 1 1.387 0Z" fill="#FC7614" /> </svg> </span> <h2>How did we do?</h2> <p> Please let us know how we did with your suppoer request. All feedback is appreciated to help us improve our offering! </p> <div class="rating"> <span class="circle">1</span> <span class="circle">2</span> <span class="circle">3</span> <span class="circle">4</span> <span class="circle">5</span> </div> <button class="btn">SUBMIT</button> </div> </div> </body>

CSS 调整大小时溢出

问题描述

1 个解决方案

解决方案1
2 已采纳 2023-01-30 09:01:52

CSS 调整大小时溢出

问题描述

1 个解决方案

解决方案1 2 已采纳 2023-01-30 09:01:52

解决方案1
2 已采纳 2023-01-30 09:01:52