CSS 글자자르기 코드와 width 레이아웃 관련 문제
본문
https://homzzang.com/b/html-10
위 페이지 관련글 a 링크 부분에 아래 파란색 CSS 적용하면 왜 레이아웃이 깨질까요?
메인 너비가 900PX 최대 900px 안 넘어야 정상인데...
a 링크의 제목 부분을 display:none 시키면 정상적으로 레이아웃이 900px 잡힙니다.
width: 100%;
max-width: 100%;
padding: 5px 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
관련글 부분에서 F12키 누르면 관련 CSS 확인 가능합니다.
https://homzzang.com/b/css-251
PS.
현재 위 코드를 적용하면 레이아웃이 깨져서 max-width:580px로 임시방편으로 사용중인데,
원인을 못찾겠네요. 아래 게시판처럼 좁은 레이아웃 게시판에서는 정상적으로 나옵니다.
해결 기대 않고 올리니 걍 관심만이라도 가져주세요. ^^;;
답변 3
width: 100% ---> width: 900px;
width: 900px;
max-width: 100%;
padding: 5px 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
미디어 쿼리로 해상도에 따라 900px 을 100% 지정 하시면 되지 않을까요?
적용해보니 잘 되네요. ㅎ 감사합니다.
지금 보니까, 질게 부분에서 너비가 900으로 고정되어네요. ㅋ
아무래도 이것도 제대로 된 방법이 아닌 것 같아요.
잘 해결되길기원합니다.
관심 감사합니다. ^^
혹시 box-sizing:border-box 를 지정하면 되지 않을까요???
그리고 ^------- 이것과 아주 먼 관련이 있을지도 모르는데요.
100% 를 할때 깨지는 경우에
calc( 100% - 1px ) 이렇게 하면 깨지지 않는 경험을 한적이 종종 있어요.
적어주신 코드들 적용해 봤는데,,,그대로네요.
관심 감사합니다.