이전 목록 다음
채택완료

CSS 글자자르기 코드와 width 레이아웃 관련 문제

sinbi
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-01-09 (목) 20:46:36 4,979

31603582_1578570129.5625.gif

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로 임시방편으로 사용중인데,

원인을 못찾겠네요. 아래 게시판처럼 좁은 레이아웃 게시판에서는 정상적으로 나옵니다.

https://homzzang.com/b/order

해결 기대 않고 올리니 걍 관심만이라도 가져주세요. ^^;;

답변해주신 모든 분들께 좋아요 버튼 쏴드려요. 31603582_1578570390.8888.gif

css 글자자르기 레이아웃
|

답변 3개 / 댓글 5개

채택된 답변
+20 포인트
승승희아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-01-09 (목) 22:45:32

width: 100% ---> width: 900px;

Copy 
width: 900px;
max-width: 100%;
padding: 5px 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

답변에 대한 댓글 3개

승희아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-01-09 (목) 23:11:22
미디어 쿼리로 해상도에 따라 900px 을 100% 지정 하시면 되지 않을까요?
sinbi
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-01-09 (목) 23:12:33
적용해보니 잘 되네요. ㅎ 감사합니다.
sinbi
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-01-09 (목) 23:19:38
지금 보니까, 질게 부분에서 너비가 900으로 고정되어네요. ㅋ
아무래도 이것도 제대로 된 방법이 아닌 것 같아요.
비비펫3
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-01-09 (목) 22:28:24

혹시 box-sizing:border-box 를 지정하면 되지 않을까요???

그리고 ^------- 이것과 아주 먼 관련이 있을지도 모르는데요.

100% 를 할때 깨지는 경우에

calc( 100% - 1px ) 이렇게 하면 깨지지 않는 경험을 한적이 종종 있어요.

답변에 대한 댓글 1개

sinbi
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-01-09 (목) 23:09:53
적어주신 코드들 적용해 봤는데,,,그대로네요.
관심 감사합니다.
호호호호맨
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-01-09 (목) 22:21:53

잘 해결되길기원합니다.

답변에 대한 댓글 1개

sinbi
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-01-09 (목) 23:07:03
관심 감사합니다. ^^

답변을 작성하려면 로그인이 필요합니다.