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
如果您的目标是不让从新行开始并且不溢出,则需要将
overflow:hidded
设置为。
如果希望文本在超出
标记然后放Overflow:hidden; 到它的父容器(在您的示例中是。。。但是如果您希望文本保留在
容器,则您必须创建
标记和“font-size”响应迅速,使其根据宽度进行调整,然后不会溢出!!! 如果你只是不想要任何滚动页面,那么请将溢出放在html或主体的CSS命令中。。。。