집 > 기사 > 웹 프론트엔드 > 요소가 너무 넓어서 완전히 표시할 수 없을 때 요소를 숨기는 CSS 기능을 설명하는 예

요소가 너무 넓어서 완전히 표시할 수 없을 때 요소를 숨기는 CSS 기능을 설명하는 예

小云云원래의: 2017-12-30 13:54:211505검색

이 글에서는 요소가 너무 넓어서 완전히 표시할 수 없을 때 요소를 숨기는 CSS 기능을 주로 공유합니다. 구현해야 할 스타일은 여러 레이블을 고정 너비로 연속으로 표시하는 것입니다. 컨테이너의 개수는 가변적이며, 각 라벨의 개수는 가변적입니다. 길이도 가변적입니다. 특정 라벨이 완전히 표시되지 않으면 표시되지 않습니다. 일반적인 효과는 다음과 같습니다. 레이블이 한 행에만 표시됩니다. 레이블이 너무 많으면 표시되지 않습니다.

레이블 부분의 DOM 구조는 다음과 같습니다.

<p class="labels">  
    <span class="label">Cooking</span>
    <span class="label">Coding</span>
    <span class="label">Travel</span>
    <span class="label">Photography</span>
    <span class="label">Reading</span>
</p>

얼핏 보면 이 문제는 js를 최대한 사용하지 않고 스타일 문제를 해결한다는 원칙에 맞춰 매우 간단해 보입니다. 완벽한 효과를 얻기 위해 다음 스타일을 작성했습니다. 마지막 두 .labels는 .labels의 너비를 초과하기 때문에 다음 줄로 접힌 다음 .labels의 Overflow: Hidden에 의해 숨겨지는 것을 볼 수 있습니다.

.label {
    display: block;
    height: 24px;
    line-height: 24px;
    padding: 0 10px;
    background-color: #e1ecf4;
    border-radius: 12px;
    font-size: 14px;
    flex-shrink: 0; // label 不收缩，长度为内容长度

    & + .label {
        margin-left: 5px;
    }
}

.labels {
    height: 24px; // 一行 label 的高度
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

그런데 얼마 지나지 않아 갑자기 문제를 발견했습니다. 첫 번째 라벨의 길이가 컨테이너의 너비를 초과하면 완전히 숨겨지지 않고 아래와 같이 내용이 잘립니다.

이 문제는 한동안 저를 괴롭혔습니다. 저는 CSS의 어떤 속성이 부모 컨테이너를 초과하는 부분을 숨기는 대신 너비가 부모 컨테이너를 초과할 때 전체 자식 요소를 숨길 수 있는지 생각해 왔습니다. . 온갖 생각을 해도 별 성과가 없었고, js를 사용해서 구현할까 고민하다가 갑자기 아이디어가 떠올랐어요. 첫 번째 라벨도 포장되나요?

그럼 첫 번째 라벨을 감싸는 방법은 무엇일까요? 더 이상 첫 번째 요소가 아닌 경우 flex의 특성을 활용하여 래핑할 수 있는 더 까다로운 방법을 생각했습니다~ 그래서 모든 .label 요소 앞에 .placeholder 요소는 너비가 1px이고 높이가 100%입니다. 요소를 살펴보면 .placeholder 요소가 첫 번째 행의 위치를 차지하고 있는 것을 볼 수 있으며, 원하는 효과를 얻을 수 있습니다~

실제로 이 아이디어를 이용하면 float를 사용해도 동일한 효과를 얻을 수 있습니다. 조금 까다롭고 추가 DOM 요소를 사용했지만 효과는 완벽하게 구현됩니다~

요소가 너무 넓어서 완전히 표시할 수 없을 때 요소를 숨기는 CSS 기능을 설명하는 예

관련 기사