응답 헤더 (flexbox)에서 외부 컨테이너와 겹치지 않도록 텍스트를 만드는 방법은 무엇입니까?

Question

나는 대부분의 화면 해상도에 좋아 보이는 것 응답 헤더를 만들려고 노력하고있어 (폭 : 320-1920px) 미디어 쿼리의 최소 사용과 : 내가 충분히 폭을 축소 할 때, 텍스트가 중복으로 시작

을하지만, 외부 용기 :

먼저 생각 li 요소에 overflow: hidden;을 사용했지만, 그것은 더 나은 보이지 않는 : 여기

코드입니다 : http://jsfiddle.net/Hardcore/hxgbk6m0/1/

테두리가 li 요소의 텍스트를 만지기 시작할 때 축소를 중지하면 텍스트가 li 개의 테두리와 겹치지 않습니다. 텍스트 길이가 변경 될 수 있으므로 정적 최소 너비 만 설정할 수는 없습니다. 가로 테두리가 텍스트에 도달 할 때도 높이가 줄어들지 않도록 높이기를 원하므로 메뉴 항목은 항상 사각형입니다.

어떻게하면됩니까? 자바 스크립트를 사용하지 않고 CSS를 사용하는 것만 가능합니까? 나는 그것을 시도하는 데 몇 시간을 보냈다. 그리고 나 혼자서 할 수없는 것처럼 보인다. 도와주세요, 제발.

Answer 1

버튼 또는 Div에서 너비를 가져 와서 오른쪽 패딩과 왼쪽 패딩을 사용합니다. 이렇게하면 페이지 또는 div의 크기가 조절되어 텍스트의 양쪽에 동일한 공간이 유지됩니다.

.className{ 
padding-right:1%; 
padding-left:1%; 
} 

이외의 경우 @media 쿼리로 글꼴 크기를 변경해야합니다.