CSS 내용이 너무 긴 문제를 해결하는 방법

CSS를 작성할 때 디자인의 중요성을 잊어버렸을 것입니다. 예를 들어 콘텐츠의 길이가 기대치를 초과하고 가능성을 설명할 수 없는 경우 페이지 디자인이 무너질 가능성이 높습니다. CSS가 항상 예상대로 작동한다고 보장할 수는 없지만 적어도 이런 일이 발생할 가능성을 줄이기 위해 다양한 유형의 콘텐츠로 테스트할 수는 있습니다.

구체적인 상황은 다음과 같습니다.

오른쪽/왼쪽에 작은 아이콘이 있는 버튼

아코디언 효과가 있는 스위치 버튼입니다. 클릭 가능하다는 점을 강조하기 위해 버튼 오른쪽에 작은 아이콘이 있습니다. 그러나 버튼 영역이 충분히 길지 않으면 버튼의 텍스트가 아이콘을 덮게 됩니다. 이는 더 긴 콘텐츠를 고려하지 않을 때 발생할 수 있습니다.

아이콘 크기에 맞게 오른쪽에 충분한 패딩 값을 추가할 수 있습니다.

.button {
  padding-right: 50px;
}

아이콘의 안전한 표시 영역을 만들기 위해 패딩 값을 어떻게 늘렸는지 확인하세요. 버튼은 더 이상 영향을 받지 않습니다.

(관련 튜토리얼 추천: CSS 튜토리얼)

입력 자리표시자

저희 포럼에서 플로팅 주석 모드를 사용할 때, 특히 버튼이 오른쪽에 있을 때, 완전히 테스트해야 합니다. 자리 표시자가 너무 깁니다.

한 가지 해결책은 버튼에 상대적인 위치를 추가하여 버튼이 자리 표시자를 덮도록 만드는 것입니다.

긴 이름

이 디자인에서는 이미지가 왼쪽에 떠 있고 오른쪽에는 작가 이름에 대한 정보가 있습니다. 오른쪽 정보의 길이가 너무 길면 어떻게 되나요? 레이아웃이 무너질 것이라는 데는 의심의 여지가 없습니다.

여기서 문제는 작성자의 이름이 옆으로 이동하도록 이미지를 왼쪽으로만 플로팅했다는 것입니다. 그러나 이는 작성자의 이름 길이가 더 짧은 경우에만 제대로 수행됩니다.

페이지 레이아웃을 보다 적합하게 만들려면 두 요소 모두에 너비를 추가해야 합니다. 더 권장되는 방법은 이러한 작은 구성 요소에 더 적합한 flexbox를 사용하는 것입니다.

글에 긴 링크/단어가 있습니다

때때로 글에 매우 긴 하이퍼링크나 단어가 포함되어 있는데, 이는 창이 매우 넓으면 문제를 일으키지 않을 수 있습니다. 그러나 휴대폰이나 태블릿과 같은 일부 소형 장치에서는 이로 인해 성가신 가로 스크롤 막대가 생성될 수 있습니다.

이 문제에 대한 두 가지 해결책이 있습니다.

(1) CSS word-break 사용

.article-body p {
  word-break: break-all;
}

word-break 속성은 브라우저마다 다르게 동작하므로 사용할 때 완전히 테스트해야 합니다.

(2) 외부 요소에 오버플로 및 텍스트 오버플로 추가

.article-body p {
  overflow: hidden;
  text-overflow: ellipsis;
}

이 솔루션은 긴 링크에 더 친숙합니다. 긴 단어의 경우 단어 분리를 사용하는 것이 좋습니다.

기사 태그가 너무 깁니다

기사 태그를 카드에 배치할 때 패딩 설정만으로 크기를 결정하는 것이 좋습니다. 라벨 내용이 너무 긴 경우 높이와 너비를 프로그래밍하면 레이아웃이 무너질 수 있습니다.

레이블의 최소 너비를 설정할 수도 있습니다. 패딩으로 둘러싸인 레이블 콘텐츠 요소에 min-width 속성을 사용하면 너비가 동적으로 변경되고 문제가 해결됩니다.

고정 링크가 있는 단락 헤더

이 예에는 단락 헤더 오른쪽에 '더 보기' 링크가 있습니다. CSS를 작성하는 방법에는 여러 가지가 있으며 그 중 하나는 링크에 절대 위치 지정을 사용하는 것입니다.

제목이 너무 길면 문제가 발생할 수 있습니다. 더 나은 해결책은 flexbox 레이아웃을 사용하여 공간이 충분하지 않을 때 링크가 자동으로 다음 줄에 압축되도록 하는 것입니다.

.header-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

위의 기술을 '무빙 랩 정렬'이라고 합니다.

추천 비디오 튜토리얼: css 비디오 튜토리얼

위 내용은 CSS 내용이 너무 긴 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!