时间戳

首页 > 解决方案 > 为什么溢出：隐藏没有应用于我的

元素？

css - 为什么溢出：隐藏没有应用于我的

元素？

问题描述

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

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;
}

Codepen :: https://codepen.io/StinsonTheNoob/pen/oNbxjWx

标签： cssoverflow

解决方案

如果您希望文本在超过右侧的第一行时消失

然后标记溢出：隐藏；到它的父容器，在你的情况下是......但是如果你希望该文本保留在

只有这样你才需要制作容器

标签和“字体大小”响应，使其根据宽度适应，然后不会溢出！！！如果您只是不想滚动页面，请在 html 或 body 的 CSS 命令中添加溢出......

推荐阅读