CSS에서 텍스트가 겹침

-2

빠른 질문 - 내가 검색 할 때 찾을 수 없었지만 반복하면 죄송합니다.CSS에서 텍스트가 겹침

나는 내 웹 사이트의 제목을 둘러싸는 단락 태그가 :

<div class = "title"> 
    <p>Welcome to homepage!</p> 
</div> 

<div class = "subtext"> 
    <p> Subtext goes here </p> 
</div> 

<div class = "formthing"> 
    <form method = "GET" action = "/form"> 
    <input type = "submit" name = "submitted" class = "btn-large" value = "Click button" /> 
    </form> 
</div>

를 모든 것이 잘 작동한다. 그러나 페이지를 확대하면 제목의 단어가 서로 겹칩니다. 이 문제를 방지하기 위해 CSS에 추가 할 수있는 것이 있습니까?

출처

2013-12-08 HJ32

그 이상의 정보를 추가하십시오. 아무도 도망 갈 수있는 아무 것도 도와 줄 수 없습니다. – Josiah

제공되는 코드가 없을 때 사람들이 어떻게 당신을 도울 것으로 기대합니까? rovide fiddle – San

@ 샌프란 코드를 추가했습니다. – HJ32

코드에서 중복되는 부분이 보이지 않지만 빠른 수정은 CSS를 통해 여백을 추가하여 겹치지 않게하는 것입니다.

예 :

<style> 
.formthing { 
margin: 0.25em; 
} 
</style>

출처

2013-12-08 02:58:54 user3037493

당신은 당신의 CSS에 em 글꼴 크기를 사용해야합니다. 기본적으로 http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

em 비율을 표현하는 또 다른 방법입니다하지만 pt, px를 사용하는 경우 일부 브라우저는 줌의 높고 낮은 수준으로 주저 :이 무엇인지 알 수없는 경우,이 그것에 정말 좋은 기사입니다 및 % 값. em을 사용하면이 문제가 가장 잘 완화됩니다.

font-size: 16px; 
font-size: 100%; 
font-size: 1em;

대부분의 최신 브라우저는 제어와 같은 16px 글꼴 크기를 기본값으로하고 (제공하거나 파이어 폭스와 IE에서 일부 소수을) 서로 위의 3 글꼴 크기가 동일하고, 그 오프 조정합니다. 이것은 바보가 아닙니다. 그러나 대부분이 상황을 통해 당신을 얻을 것입니다. 예기치 않은 텍스트 및 요소 겹침을 방지하기 위해 매우 광범위하게 실행되고 입증 된 방법입니다.

또한 사용중인 글꼴과 커닝이 적용되어 있는지 여부를 확인하고 letter-spacing: 1px;을 사용하여 적절하게 조정할 수 있습니다.

Normalize.css과 같은 CSS 재설정을 사용하는 것을 잊지 마십시오.

출처

2013-12-08 03:11:00 Deryck

CSS에서 텍스트가 겹침

답변

관련 문제