时间戳

首页 > 解决方案 > 调整到较小的屏幕时，文本消失而不是换行

css - 调整到较小的屏幕时，文本消失而不是换行

问题描述

当我调整屏幕大小时，我在尝试使我的文本换行时遇到了一些麻烦。出于某种原因，当我缩小屏幕时，文字没有换行，而是文字开始消失而不是换行。

js：

export default function About() {
  return (
    <>
      <div className="about-hero">
        <h1> Making your shopping experience more enjoyable.</h1>
      </div>
    </>
  );
}

CSS：

*{
  box-sizing: border-box
}

.about-hero {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1)),
    url("https://images.pexels.com/photos/301930/pexels-photo-301930.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-align: center;
  color: #ffff;
  height: 50vh;
  line-height: 50vh;
 
}

.about-hero h1{
  word-wrap: break-word;
}

标签： csstextword-wrap

解决方案

*{
  box-sizing: border-box
}

.about-hero {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1)),
    url("https://images.pexels.com/photos/301930/pexels-photo-301930.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-align: center;
  color: #ffff;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
 
}
<div class="about-hero">
        <h1> Making your shopping experience more enjoyable.</h1>
</div>

推荐阅读