CSS网格-当我调整到更小的屏幕时，为什么我的文本会被切断？ 就像标题所说，当我检查和查看较小的设备尺寸时，它只是在屏幕最右边的文本被切断。

这是我的HTML：

*{
保证金：0；
}
身体{
溢出x：隐藏；
}
.wrapper 1{
显示：网格；
网格模板柱：6fr 3fr；
边框：2px实心#6cccb0；
溢出：隐藏；
高度：30px；
背景色：#6cccb0；
宽度：1700px；
}

免费发货|保证经久耐用
登录|注册|客户服务| 1-800-692-8259

您可以使用

width: 100%;

而不是

width: 1700px;

因此，您的item2文本不会消失

编辑1：

如果您想将文本保留在一行中，我建议使用@media querys更改字体大小。所以你的css必须是这样的

* {
    margin: 0;
}

.wrapper1 {
    display: grid;
    grid-template-columns: 2fr 2fr;
    border: 2px solid #6cccb0;
    height: 30px;
    background-color: #6cccb0;
    font-size: 1em;
    color: orange;
}

@media only screen and (max-width: 440px) {
    .wrapper1 {
        font-size: 0.4em;
        color: yellow;
    }
}

@media only screen and (min-width: 440px) {
    .wrapper1 {
        font-size: 0.5em;
        color: aqua;
    }
}

@media only screen and (min-width: 560px) {
    .wrapper1 {
        font-size: 0.6em;
        color: green;
    }
}

@media only screen and (min-width: 728px) {
    .wrapper1 {
        font-size: 0.8em;
        color: blue;
    }
}

@media only screen and (min-width: 1024px) {
    .wrapper1 {
        font-size: 1em;
        color: red;
    }
}

---

我用颜色规则来帮助你理解发生了什么。你可以删除它们。我希望它能帮助您。

为什么不删除硬设置的宽度和

溢出：隐藏的
属性？这些都会导致你的内容在屏幕外同时被剪切


*{
保证金：0；
}
.wrapper 1{
显示：网格；
网格模板列：2fr 1fr；
对齐项目：居中；
边框：2px实心#6cccb0；
背景色：#6cccb0；
}

免费发货|保证经久耐用
登录|注册|客户服务| 1-800-692-8259
尝试删除溢出-x:hidden；或者更好的是，去掉
宽度：1700px这不起作用，我试图避免水平滚动条。你的网格总是1700px宽，主体溢出是隐藏的。如果要将文本换行到第二行，请使用类似于
最大宽度：100%
的方法。当我这样做时，div的宽度会缩小到屏幕的一半，然后再调整到更小的屏幕。@Daniel Klein。我编辑了我的答案，希望它能解决你的问题，我希望你是对的，这解决了截止问题。但是现在，如果我想让文本在同一行，而不是在较小的屏幕上被推到一个新的行？好的，首先让我们考虑一下，如果屏幕大小减小，文本会发生什么？如果你需要让所有的文字都可见并且在同一行，那么你应该将字体大小减小到足够大，这样看起来就很好；因为唯一的另一个选择是剪切文本，但这会遗漏信息