代码之家 › 专栏 › 技术社区 › Tomas Gil Amoedo

为什么这个tetx没有在x轴上溢出,即使我有一个固定的宽度,并且<p标记设置为display:block?

css html javascript

Tomas Gil Amoedo · 技术社区 · 2 年前

我需要文本在X轴上溢出,只是为了重现我在一个更大的项目中遇到的一些问题。我留下一个简单的片段,这样你就可以告诉我哪里做错了。谢谢

.article {
  background-color: rgb(236, 161, 161);
  width: 20em;
}

.article p {
  display: block;
}

    <article class="article">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis deleniti iure quidem distinctio officia voluptates similique molestiae culpa? Perferendis, velit maiores nobis maxime aut facere eaque quis voluptas accusamus commodi.</p>

    </article>

1 回复 | 直到 2 年前

GROVER. sms 2 年前

如果你想要 p 标记在x轴上溢出,只需告诉它不要使用 white-space 所有物

article{
    width: 20em;
    background-color: rgb(236, 161, 161);
}

article p{
    display: block;

    /* Do NOT break the text onto a new line when it reaches the container bounds. */
    white-space: nowrap;
}

<article>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis deleniti iure quidem distinctio officia voluptates similique molestiae culpa? Perferendis, velit maiores nobis maxime aut facere eaque quis voluptas accusamus commodi.
    </p>
</article>

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前