웹 프로그래밍/CSS
text-overflow: ellipsis가 적용되지 않는다면?
먼저 확인해보자. display: block인가? width가 명확히 지정되었는가? 글자가 width를 넘어간게 맞는가? 1. display: flex에서는 적용되지 않는다. 2. 아래를 세트로 같이 줘보자. overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow text-overflow - CSS: Cascading Style Sheets | MDN The text-overflow CSS property sets how hidden overflow content is signaled to users. It..
flex안의 요소가 눌리는 현상
flex에서 아이템은 width값을 주어도, 화면이 줄어들면 width를 무시하고 줄어든다. 브라우저 가로 길이를 줄이면 박스가 알아서 줄어드는 것을 확인할 수 있다. 이는 flex-shink의 기본값이 '1' 줄어듦이기 때문이다. 크기를 유지하고 싶다면 0을 사용해야한다. flex-shrink: 0; 을 추가해주었더니 해결되었다. flex-shrink: 0;