홈>
문제
현재 Angular를 사용하여 만든 사이드 메뉴가 있는데 화면에서 잘 작동합니다 (4k 해상도). 작은 화면에서 문제가 발생하면 메뉴의 텍스트가 줄 바꿈되지 않아 컨테이너 div가 오버플로됩니다. 나는
overflow-wrap: break-word;
를 적용하려고했습니다
텍스트에 있지만 작동하지 않습니다.
도움을 주시면 감사하겠습니다.
아래에서 문제를 볼 수 있습니다 :
<시간> 코드구성 요소의 HTML :
<div class="sidebar animated fadeIn">
<div class="header">
<div style="display:block;margin-left:auto;margin-right:auto;width:100%;">
<img src="../../../assets/images/logo.svg" style="width:100%" />
</div>
</div>
<div class="spacer"></div>
<div class="menu-item" *ngFor="let item of items" (click)="goTo(item.path)">
<i class="material-icons">{{item.icon}}</i>
<h3 class="text">{{item.name}}</h3>
</div>
</div>
구성 요소 스타일링 :
.sidebar {
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: 2;
width: 10%;
background: rgba(191, 158, 69, 1);
background: -moz-linear-gradient(top, rgba(191, 158, 69, 1) 0%, rgba(250, 239, 210, 1) 100%);
background: -webkit-gradient(
left top,
left bottom,
color-stop(0%, rgba(191, 158, 69, 1)),
color-stop(100%, rgba(250, 239, 210, 1))
);
background: -webkit-linear-gradient(bottom, rgba(191, 158, 69, 1) 0%, rgba(250, 239, 210, 1) 100%);
background: -o-linear-gradient(bottom, rgba(191, 158, 69, 1) 0%, rgba(250, 239, 210, 1) 100%);
background: -ms-linear-gradient(bottom, rgba(191, 158, 69, 1) 0%, rgba(250, 239, 210, 1) 100%);
background: linear-gradient(to top, rgba(191, 158, 69, 1) 0%, rgba(250, 239, 210, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf9e45', endColorstr='#faefd2', GradientType=0 );
box-shadow: 5px 0 15px rgba(0, 0, 0, 0.5);
}
.header {
width: 100%;
}
.spacer {
margin-top: 3em;
}
.menu-item {
border-top: 1px solid darkgray;
padding-left: 2em;
height: 3em;
display: flex;
align-items: center;
cursor: pointer;
}
.menu-item .text {
margin-left: auto;
margin-right: auto;
overflow-wrap: break-word;
}
-
답변 # 1
관련 자료
- css 선택기 img - hover : 적용되지 않은 후
- javascript - for of 루프에서 간단한 배경 이미지가 부모에 적용되지 않습니다
- css - 활성 탭 스타일이 적용되지 않는 이유는 무엇입니까?
- php - mpdf 특정 스타일 만 적용
- html - 하위 부모의 스케일링 중에 CSS 부모 경계 반경이 적용되지 않음
- semantic ui - 자바 스크립트로 추가 할 때 드롭 다운 스타일이 적용되지 않음
- 패딩이 적용되었지만 CSS에있는 것과 다른 값
- html - 탐색 컨텐츠에 적용되지 않는 클래스의 CSS
- angular - 매트 확장 패널 헤더에 적용되지 않습니다
- javascript - jquery css - 요소에 z- 색인이 적용되지 않음
- 장고 관리자 CSS는로드 후 적용되지 않습니다
- javascript - Tippyjs 사용자 정의 테마가 적용되지 않음
- html - CSS 규칙이 예상대로 적용되지 않는 이유는 무엇입니까?
- css - 애니메이션 - 불투명도 속성이 적용되지 않습니다
- 푸른 URL 권한 부여가 적용되지 않는 규칙
- html - iframe 내부에 특정 CSS 속성이 적용되지 않음
- javascript - 브라우저에 부트 스트랩이 적용되지 않습니다
- c# - 물체에 힘이 가해지고 있는지 확인하는 방법이 있습니까?
- javascript - 아래 코드에서 'text'블록에 대한 CSS 속성이 적용되지 않는 이유는 무엇입니까?
- html - 오버플로가 스크롤로 설정된 경우에도 페이지 위로 푸시되는 요소
관련 질문
- html - 최소 높이에서도 채우지 않는 div - 100 %;
- html - 부트 스트랩 4에서 반응 형 문제를 해결하는 방법
- python - Django에서 URL을 설정하는 방법은 무엇입니까?
- css - 자리 표시자가 아닌 입력 값에 문자 간격을 추가하는 방법 (Angular 11)
- css - HTML 입력 날짜, 날짜와 아이콘 사이의 공간을 줄이는 방법은 무엇입니까?
- html - H1 태그를 반응 형으로 만들려면 어떻게해야합니까?
- html - CSS 자식 div를 스크롤 가능하고 열 중앙에 배치하십시오
- html - 머티리얼 UI 그리드 안에 2 개 항목;하나는 왼쪽 정렬, 하나는 오른쪽 정렬 같은 줄에
- html - CSS 테두리 전환은 원하지 않는 추가 픽셀을 추가합니다
- javascript - 국가 코드가 동일한 국가의 국가 코드 선택 드롭 다운 문제
이 속성 추가
word-break: break-all;