반응 형 웹 디자인에서 원하는 줄 바꿈을 처리하는 가장 좋은 방법은 무엇입니까?

판매 또는 전자 메일을위한 간단한 단일 페이지 웹 항목을 많이 디자인합니다. 헤드 라인에 문제가 있고 원하는 미디어 너비가 다른 줄 바꿈이 자주 발생합니다.

예를 들어 다음과 같은 헤드 라인을 가질 수 있습니다.

우리의 새로운 thingamabob는 얇게 썬 빵 이후 가장 좋은 것입니다!

줄 바꿈에주의를 기울이지 않으면 다음과 같이 줄 바꿈이 발생합니다.

우리의 새로운 thingamabob는
얇게 썬 빵 이후 가장 좋은 것 입니다!

전체 웹 크기에서 "the"다음에 줄을 바꾸고 싶습니다. 두 줄 만들기.

우리의 새로운 thingamabob는
얇게 썬 빵 이후 가장 좋은 것입니다!

너비가 중간 인 화면의 경우 두 번 나누었습니다.

우리의 새로운 thingamabob
는
얇게 썬 빵 이후 가장 좋은 것 입니다!

더 좁은 화면의 경우 "새", "thingamabob"및 "thing"후에 중단됩니다. 네 줄 만들기.

우리의 새로운
thingamabob
는
얇게 썬 빵 이후 가장 좋은 것 입니다!

나는 정말 (휴식 태그를 사용하지 않는다 <br>) 그 하드 설정하기 때문에 모든 규모에서 휴식. 지금까지 나는 여러 가지에 대한 미디어 쿼리와 너비 비율을 사용했습니다 h1- h5그래서 태그를 태그 힘 휴식의 폭입니다. 그러나 이것은 나에게 "해킹 적"인 것처럼 보입니다 ( 실제 텍스트를 기반으로하는 경우 도 매우 기 질적입니다).

줄 바꿈을 HTML로 하드 코딩하지 않고 제어하는 ​​가장 좋은 방법은 무엇입니까?

단락이 아닌 짧은 텍스트 스 니펫에 사용된다는 점을 근거로만 조언합니다.

헤드 라인 서식은 가능한 한 제한적 으로 제어 할 수 있으며 제어해야합니다 . JavaScript 또는 불필요한 불필요한 요소는 "합리적인 한계" 가 아닙니다 .

반면에 속하지 않는 공간 은 적당히 사용될 때 유용 할 수 있습니다.
함께 유지하려는 단어 쌍과 삼중 항 사이에 배치하면 원하는 결과를 얻을 수 있습니다.

그러나 사용하는 단어의 길이에 따라 연속해서 많이 사용할 수 없으며 너무 많이 연결하면 텍스트가 뷰포트 또는 컨테이너에서 오버플로됩니다.

자신의 특정 단어 집합에 대한 몇 가지 빠른 실험은 연결하기에 가장 적합한 단어를 나타내야합니다.

이 질문의 예에서 HTML은 다음과 같습니다.

<span>Our&nbsp;New thingamabob is&nbsp;the best&nbsp;thing since&nbsp;sliced&nbsp;bread!</span>

실제로 여기에는 CSS가 필요하지 않습니다. 이 예제 에서 CSS 는 단지 재미를위한 것입니다.

간단히 말해서,이 방법의 핵심은 텍스트가 깨질 수있는 장소의 수를 제한하는 것입니다.

질문을 다시 읽은 후에는 요구 사항을 충족시키지 못했다는 것을 알게되었습니다. 이 특정 경우와 동일한주의가 필요한 다른 페이지가 있다고 가정 <br>하면 전체 너비 중단 점에 대해 단일 페이지를 정의합니다 . 그런 다음 제목의 가장 이상적인 장소에서 각 페이지의 동일한 클래스를 재사용합니다.

이 <br>클래스는 미디어 쿼리를 사용하여 마치 너비가없는 것처럼 전체 너비보다 작은 크기로 축소됩니다. 전체 너비보다 작은 뷰포트 크기에서는  의 자체에만 의존합니다 .

<br>마크에 더 가까운 단일 예제 .

HTML :

<span>
    Our&nbsp;New thingamabob is&nbsp;the<br class="full-width-breakpoint"/> best&nbsp;thing since&nbsp;sliced&nbsp;bread!
</span>

CSS :

@media screen and (max-width:550px) {    /* Max Width depends on your design */     
    .full-width-breakpoint {             /* only experimentation or */
        display:none;                    /* calculation will reveal */
        line-height:0;                   /* the best max-width */
    }
}

가장 좋은 방법은 웹에서 줄 바꿈을 실제로 제어 할 수 없으며이를 염두에두고 디자인하는 것이 가장 좋습니다.

반대로, 그에 대한 해결책은 항상 해키어야합니다. HTML은 하드 코딩 외부에서 사용자 정의 줄 바꿈을 준수하지 않기 때문에 해킹 일 것 입니다. JS로 상당히 쉽게 할 수 있습니다. 고유 클래스가있는 빈 스팬으로 중단 점을 설정 한 다음 뷰포트 크기에 따라 원하는 각 SPAN에 BR 태그를 삽입 할 수 있습니다.

브라우저가 줄 바꿈을 처리하는 방식을 제어하기 위해 최신 브라우저에서 작동하는 CSS 스타일이 있지만 여전히이 상황에서 원하는 정확한 제어 기능을 제공하지는 않습니다.

반면에 목표가 특정 줄 바꿈을 제어하는 ​​것이 아니라 텍스트 블록이 상대적으로 균일 한 행에 '스택'되도록하려면 각 뷰포트에 대해 DIV의 너비를 다르게 설정합니다. 완벽하지는 않지만 아주 가까우며 최상의 타협이 될 수 있습니다.

이를위한 jquery 플러그인 인 Balance Text가 있습니다.

Adobe의 제안text-wrap: balance; 과 함께 Adobe InDesign의 Balance Ragged Lines 기능과 같은 CSS 옵션을 얻기 위해 만든 Adobe 플러그인 입니다.

그러나 플러그인은 지금 작동합니다. 클래스 balance-text가 있거나 jQuery를 사용 하는 모든 요소의 균형을 유지합니다.$('.some-elements').balanceText();

• 여기 공식 어도비 데모 정렬 텍스트를 사용하여 .

• 다음은 왼쪽 정렬 s -hit edit를 사용하여 코드를 확인한 데모<h1> 입니다. 이것은 글을 쓸 때의 몇 가지 제한 사항을 보여줍니다.

한계

이 코드는 현재 인라인 요소가없는 블록 수준 태그의 텍스트에서만 작동합니다.

데모 사에서 당신은 어떻게 같은 균형 문안의 블록 내에서 아무것도 볼 수 <a>링크 <span>와 같은 S 또는 강조 <em>, <strong>, <b>, <i>등이 제거됩니다합니다.

또한 데모 1, 2 및 5를 비교 하면 CSS 클래스와 jQuery 호출을 모두 사용해야 하는 것으로 보입니다 .

적당히 신뢰할 만하지 만 때로는 글리치가 있습니다-글을 쓸 때 때로는 옆 열에있을 때 미끄러 져 고독한 고아를 떠납니다. 사이드 칼럼에있을 때) 설명 할 수없는 이유로 내 데모는 Firefox에서 작동하지 않지만 Adobe의 데모는 작동합니다 (IE9 이상에서는 IE8에서 테스트 할 수 없음). 사용하는 경우 테스트 시간을 고려하십시오.

JavaScript를 사용하여 화면 너비를 감지하고 innerHTML을 통해 올바른 버전 (게시물에 <br>이 있음)을 빈 div에 쓸 수 있습니다.

불행히도 "원하는 웹 나누기"와 "최상의 웹 사례"는 함께 가지 않습니다. 완벽한 단어를 올바른 장소에 담으려는 완벽 주의자 욕구를 피하십시오. 너무 많은 화면 가능성과 디자이너의 사고 방식이없는 독자가 너무 많아서 제목의 줄 바꿈조차 신경 쓰지 않아도됩니다. 반응 형 웹 디자인을 찾아서 이러한 문제를 더 잘 이해하십시오.

나는 무언가를 특정 방식으로 깨뜨리기를 원하는 디자이너의 의견으로이를 다소 정기적으로 처리해야합니다. 이 작업을 수행하는 가장 간단한 방법은 텍스트 안에 클래스가있는 범위를 넣은 다음 해당 범위 display: block;를 미디어 쿼리에 사용하는 것입니다.

따라서 다음과 같이 보일 것입니다.

<p>This is some text and I want <span class="mobile-only-line-break">only this text to break, but only on mobile</span></p>

그런 다음 CSS를 다음과 같이 사용합니다.

@media all and (max-width: 767px) {
.mobile-only-line-break { 
display: block;
}
}

모든 너비에 대해 원하는 방식으로 문제를 해결하기 위해 계속 진행하고 미세 조정해야합니다.

빈번한 문제인 경우 Twitter 부트 스트랩 또는 사용중인 그리드 시스템을 사용하여 고유 한 줄 바꿈 클래스 세트를 작성하여 사용중인 이름 지정 규칙에 따라 클래스 이름을 모델링 할 수 있습니다.

내 현재 방법 ...

<h1>Our New thingamabob is the best thing since sliced bread!</h1>

그리고 CSS :

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
   h1 { margin: 0 auto; text-align: center; width: 280px; }
}

@media only screen 
and (min-width : 321px) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}


@media only screen 
and (max-width : 320px) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    h1 { margin: 0 auto; text-align: center; width: 550px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
    h1 { margin: 0 auto; text-align: center; width: 800px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    h1 { margin: 0 auto; text-align: center; width: 550px; }
}


@media only screen 
and (min-width : 1224px) {
    h1 { margin: 0 auto; text-align: center; width: 800px; }
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
    h1 { margin: 0 auto; text-align: center; width: 1200px; }
}


@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}

너비 는 사용되는 실제 텍스트를 기반으로 조정이 필요한 경우가 있지만 이것이 제가 사용하는 일반적인 방식입니다. 본질적으로 h1태그 너비를 줄이면 줄 바꿈하려는 부분이 끊어집니다.

이것은 효과가 있으며 원하는 곳에서 브레이크가 발생하는지 철저히 테스트해야합니다. 그러나 어떤 경우에도 철저한 테스트가 필요합니다. 따라서 반드시 더 많은 작업이 필요한 것은 아닙니다 .

줄 바꿈을 허용 할 white-space: nowrap위치 <wbr>에 추가 하고 배치 할 수 있습니다 . 이것이 충분하지 않고 미디어 쿼리를 사용하여 세밀하게 제어하려면 여전히 다음과 같은 클래스를 추가 할 수 있습니다<wbr class="mobileOnly">

<wbr>의사 : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr