휴대 전화에서 줄 바꿈

Question

웹 사이트에 전화 번호가 있습니다. 랩톱에서보기에는 좋지만 모바일 장치에서는 숫자의 절반이 다음 줄로 넘어갑니다. 보기 좋지 않습니다.

그렇다면 모바일 장치 크기의 화면에서만 작동하는 줄 바꿈을 어떻게 만들 수 있습니까?

나는 코딩에 경험이 없으므로 구체적으로 작성하십시오 :) 어떤 도움을 주셔서 감사합니다!

Answer 1

CSS word-break 속성을 살펴보면 단어/문자열이 반으로 자르지 않도록 할 수 있습니다. 특별히 줄 바꿈이라면 <br class="br-on-mobile">과 같은 요소를 클래스에 추가하고 CSS에서 display: none으로 설정하면 정상적으로 처리되지 않습니다. 그런 다음 예를 들어, 특정 모바일 화면 크기에서 줄 바꿈을 표시하는 미디어 쿼리를 사용할 수 있습니다

.br-on-mobile { 
    display: none; 
} 

@media screen and (<Your conditions here>) { 
    .br-on-mobile { 
     display: static; 
    } 
} 

편집 : static 디스플레이에 대한 잘못된 값입니다. 상속을 사용하면 문제가 해결됩니다. this Fiddle

EDIT : 미디어 쿼리의 올바른 확장/적용을 위해 페이지의 헤더도 <meta name="viewport" content="width=device-width, initial-scale=1">이어야합니다.

휴대 기기에서 스팬 요소의 숫자를 줄 바꿈하고이 값을 display: block으로 설정하여이 작업을 수행 할 수도 있습니다. 아래 미디어 쿼리의 문제도 이에 해당됩니다.