提问者:小点点

为什么Overflow:Hidden没有应用到我的<p>元素?


overflow属性没有隐藏溢出元素宽度的内容。

HTML

<section><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed feugiat lacus. Morbi auctor, nibh vitae scelerisque cursus, nisl purus imperdiet lacus, quis porttitor ante mauris eget tortor. Vestibulum id molestie dui. Nullam sit amet ultrices ante. Nulla venenatis pellentesque mi, vel condimentum orci facilisis pellentesque. Aenean a enim ac dui tempus ornare eget nec nisl. In facilisis varius ullamcorper. Aliquam magna erat, pellentesque ut arcu et, accumsan placerat urna. Vestibulum porta justo ut laoreet dapibus.
Etiam dictum semper dolor, in laoreet turpis aliquam eget. Aliquam pulvinar sem lectus, vitae hendrerit libero pellentesque eu. Duis nec tincidunt felis, sed feugiat.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed feugiat lacus. Morbi auctor, nibh vitae scelerisque cursus, nisl purus imperdiet lacus, quis porttitor ante mauris eget tortor. Vestibulum id molestie dui. Nullam sit amet ultrices ante. Nulla venenatis pellentesque mi, vel condimentum orci facilisis pellentesque. Aenean a enim ac dui tempus ornare eget nec nisl. In facilisis varius ullamcorper. Aliquam magna erat, pellentesque ut arcu et, accumsan placerat urna. Vestibulum porta justo ut laoreet dapibus.
Etiam dictum semper dolor, in laoreet turpis aliquam eget. Aliquam pulvinar sem lectus, vitae hendrerit libero pellentesque eu. Duis nec tincidunt felis, sed feugiat.</p></section>

CSS

*, *::after, *::before {
 box-sizing: border-box;
}
html, body, div, p{
  margin: 0;
  padding: 0;
}


section{
  width: 50%;
  background-color: pink;
  height: 150px;


}
p{
  font-size: 1em;
  color: blue;
  overflow: hidden;
}

代码Pen::https://Codepen.io/stinsontheNoob/pen/onbxjwx


共2个答案

匿名用户

如果您的目标是不让

从新行开始并且不溢出,则需要将overflow:hidded设置为

匿名用户

如果希望文本在超出

标记然后放Overflow:hidden; 到它的父容器(在您的示例中是。。。但是如果您希望文本保留在

容器,则您必须创建

标记和“font-size”响应迅速,使其根据宽度进行调整,然后不会溢出!!! 如果你只是不想要任何滚动页面,那么请将溢出放在html或主体的CSS命令中。。。。