홈>
문제
현재 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 - 애니메이션 - 불투명도 속성이 적용되지 않습니다
- 적용되지 않는 Azure URL 권한 부여 규칙
- html - iframe 내부에 특정 CSS 속성이 적용되지 않음
- javascript - 브라우저에 부트 스트랩이 적용되지 않습니다
- c# - 물체에 힘이 가해지고 있는지 확인하는 방법이 있습니까?
- javascript - 아래 코드에서 'text'블록에 대한 CSS 속성이 적용되지 않는 이유는 무엇입니까?
- html - 오버플로가 스크롤로 설정된 경우에도 페이지 위로 푸시되는 요소
관련 질문
- javascript : AgGrid의 드롭 다운
- html : 외부 테이블의
와 일치하도록 내부 중첩 테이블 - html : 검색 필드 크기 조정
- html : 바닥 글 자리는 매번 변경됩니다
- html : Angular 11에서 경로 매개 변수 두 부모에 어떻게 액세스 할 수 있습니까?
- html : 매트 선택 목록 사용자 정의 목록
- javascript : 부트 스트랩 모달은 닫은 후에도 몸에 패딩을 계속 추가합니다.
- javascript : 페이지가로드 될 때마다 웹 요소의 글꼴을 변경하려면 어떻게해야합니까?
- HTML 파일은 잘못된 파일 배치로 인해 CSS와 링크하고 싶지 않았습니다.
- html : 미디어 쿼리 이메일
이 속성 추가
word-break: break-all;