Các thực tiễn tốt nhất để xử lý các ngắt dòng mong muốn trong thiết kế web đáp ứng là gì?

Tôi thiết kế rất nhiều mục web đơn giản để bán hàng hoặc email. Tôi thường thấy tôi gặp vấn đề với các tiêu đề và ngắt dòng mong muốn của tôi ở các độ rộng phương tiện khác nhau.

Ví dụ: tôi có thể có một tiêu đề như:

Điều mới của chúng tôi là điều tốt nhất kể từ khi bánh mì cắt lát!

Hoàn toàn không chú ý đến ngắt dòng, ngắt dòng như thế này:

Điều mới của chúng tôi là điều tốt nhất kể từ khi
bánh mì cắt lát!

Ở kích thước web đầy đủ, tôi muốn ngắt dòng sau "the". Tạo hai dòng.

Điều mới của chúng tôi là
điều tốt nhất kể từ khi bánh mì cắt lát!

Đối với màn hình có chiều rộng trung bình, tôi sẽ phá vỡ hai lần:

Điều mới của chúng tôi
là điều tốt nhất
kể từ khi bánh mì cắt lát!

Đối với màn hình hẹp hơn, tôi sẽ nghỉ sau "mới", sau "thingamabob" và sau "điều". Tạo bốn dòng.

Chúng tôi mới
thingamabob
là điều tốt nhất
kể từ khi bánh mì cắt lát!

Tôi thực sự không muốn sử dụng thẻ break ( <br>) bởi vì điều đó khó thiết lập các ngắt ở mọi kích cỡ. Cho đến bây giờ tôi đã sử dụng các truy vấn phương tiện truyền thông và tỷ lệ chiều rộng cho nhiều h1- h5thẻ sao cho độ rộng của các lực lượng thẻ được nghỉ ngơi. Nhưng điều này có vẻ "hacky" đối với tôi (đôi khi nó cũng rất nóng tính dựa trên văn bản thực tế).

Cách tốt nhất để kiểm soát ngắt dòng mà không mã hóa chúng vào html là gì?

Tôi chỉ khuyên điều này trên cơ sở rằng nó được sử dụng cho các đoạn văn bản ngắn chứ không phải các đoạn văn.

Định dạng của các tiêu đề có thể và nên được kiểm soát càng nhiều càng tốt trong giới hạn hợp lý . JavaScript hoặc các yếu tố không cần thiết thêm không hoàn toàn là "giới hạn hợp lý" .

Mặt khác, các không gian không phá vỡ ... có thể hữu ích khi được sử dụng ở mức độ vừa phải.
Đặt chúng giữa các cặp từ và bộ ba mà bạn muốn giữ cùng nhau có thể tạo ra kết quả bạn muốn.

Tuy nhiên, bạn không thể sử dụng nhiều lần liên tiếp, tùy thuộc vào độ dài của các từ bạn đang sử dụng, liên kết quá nhiều sẽ buộc văn bản tràn ra khỏi khung nhìn hoặc vùng chứa của nó.

Một số thử nghiệm nhanh trên bộ từ cụ thể của riêng bạn sẽ tiết lộ những từ tốt nhất để liên kết.

Đối với ví dụ trong câu hỏi này, HTML có thể trông như sau:

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

Thực sự không có CSS ​​cần thiết ở đây. CSS trong ví dụ này tôi đã sản xuất chỉ để giải trí.

Tóm lại, chìa khóa của phương pháp này là giới hạn số lượng vị trí mà văn bản được phép phá vỡ.

Sau khi đọc lại câu hỏi, tôi nhận ra mình không hoàn toàn thỏa mãn yêu cầu. Đối với trường hợp cụ thể này và với giả định rằng có những trang khác yêu cầu sự chú ý tương tự, tôi sẽ xác định một trang duy nhất <br>cho điểm dừng toàn chiều rộng. Sau đó tôi sẽ sử dụng lại cùng một lớp trên mỗi trang ở vị trí lý tưởng nhất trong tiêu đề.

Đây <br>lớp sẽ sụp đổ vào bất cứ điều gì nhỏ hơn full-width diễn xuất như thể nó không phải là ngay cả ở đó, với việc sử dụng các truy vấn phương tiện truyền thông. Ở kích thước khung nhìn nhỏ hơn chiều rộng đầy đủ, chúng tôi chỉ dựa vào  một mình.

Một ví dụ khác với một<br> dấu hiệu gần với nhãn hiệu hơn.

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 */
    }
}

Cách thực hành tốt nhất là thừa nhận rằng bạn không có quyền kiểm soát thực sự đối với các ngắt dòng trên web và tốt nhất là thiết kế theo ý nghĩ đó.

Bất kỳ giải pháp nào cho ý chí trái ngược, luôn luôn phải được hack. Vì nó sẽ là một hack vì HTML không tuân thủ các ngắt dòng do người dùng xác định bên ngoài mã hóa cứng. Bạn có thể làm điều đó với JS khá dễ dàng. Thiết lập các điểm dừng của bạn với các nhịp trống với các lớp duy nhất sau đó dựa trên kích thước khung nhìn bạn có thể chèn các thẻ BR vào mỗi SPAN mong muốn.

Có một số kiểu CSS sẽ hoạt động trên các trình duyệt mới hơn để kiểm soát cách trình duyệt xử lý gói dòng, nhưng nó vẫn không cung cấp cho bạn quyền kiểm soát chính xác mà bạn đang tìm kiếm trong tình huống này.

Mặt khác, nếu mục tiêu của bạn không quá nhiều để kiểm soát các ngắt dòng cụ thể, nhưng để đảm bảo khối văn bản của bạn 'ngăn xếp' trong các hàng tương đối chẵn, tôi sẽ đặt độ rộng của DIV khác nhau cho mỗi chế độ xem. Nó sẽ không hoàn hảo, nhưng có thể khá gần và có thể là sự thỏa hiệp tốt nhất.

Có một plugin jquery cho điều đó, Cân bằng văn bản .

Đó là một plugin do Adobetext-wrap: balance; tạo ra cùng với đề xuất của Adobe để có tùy chọn CSS sẽ thực hiện điều này giống như tính năng Balance Ragged Lines của Adobe InDesign (nghe có vẻ hay, nhưng ngay cả khi được chấp nhận, sẽ phải mất nhiều năm trước khi trình duyệt hỗ trợ).

Các plugin, tuy nhiên, hoạt động ngay bây giờ. Nó cân bằng mọi yếu tố có lớp balance-texthoặc sử dụng jQuery như$('.some-elements').balanceText();

• Đây là bản demo chính thức của Adobe , sử dụng văn bản hợp lý .

• Đây là bản demo tôi đã thực hiện bằng cách sử dụng <h1>s - căn chỉnh trái để xem mã. Điều này cho thấy một số hạn chế tại thời điểm viết:

Hạn chế

Mã này hiện chỉ hoạt động trên văn bản trong các thẻ cấp khối không có thành phần nội tuyến.

Trong bản demo 4 bạn sẽ thấy cách bất cứ điều gì trong khối lại văn bản cân đối như một <a>liên kết, <span>s hoặc nhấn mạnh như <em>, <strong>, <b>, <i>vv được gỡ bỏ.

Ngoài ra, so sánh các bản demo 1, 2 và 5, bạn sẽ thấy bạn dường như cần sử dụng cả lớp CSS và lệnh gọi jQuery.

Nó có vẻ đáng tin cậy vừa phải nhưng đôi khi rất ổn - tại thời điểm viết, nó thỉnh thoảng trượt lên khi nó ở cột bên cạnh, để lại những đứa trẻ mồ côi đơn độc (nhưng dường như nó hoạt động 95% + và tôi chưa thấy nó trượt lên ngoại trừ khi ở một cột bên cạnh) và vì những lý do không giải thích được, các bản demo của tôi không hoạt động trên Firefox nhưng các bản demo của Adobe vẫn hoạt động (tốt trong IE9 +, không thể kiểm tra trong IE8 ngay bây giờ). Nếu bạn sử dụng nó, yếu tố trong một số thời gian thử nghiệm.

Tôi phải đối phó với điều này một cách thường xuyên, với đầu vào từ các nhà thiết kế muốn mọi thứ phá vỡ một cách nhất định. Tôi đã tìm thấy cách đơn giản nhất để làm điều này là đặt một khoảng với một lớp bên trong văn bản, và sau đó khoảng đó display: block;dành cho các truy vấn phương tiện.

Vì vậy, nó sẽ trông giống như thế này:

<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>

Sau đó, tôi sẽ có CSS ​​với một cái gì đó như thế này:

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

Bạn vẫn phải trải qua và tinh chỉnh nó để đảm bảo mọi thứ phá vỡ theo cách bạn muốn cho tất cả các chiều rộng.

Nếu đó là sự cố thường xuyên, bạn có thể tạo tập hợp các lớp ngắt dòng của riêng mình thành Twitter Bootstrap hoặc bất kỳ hệ thống lưới nào bạn đang sử dụng, mô hình hóa tên lớp sau bất kỳ quy ước đặt tên nào bạn đang sử dụng.

Bạn có thể sử dụng JavaScript để phát hiện chiều rộng màn hình và viết phiên bản chính xác (với <br> như bạn có chúng trong bài đăng của mình) vào một div trống thông qua InternalHTML.

Thật không may, "ngắt web mong muốn" và "thực hành web tốt nhất" không đi cùng nhau. Hãy từ bỏ mong muốn cầu toàn của bạn để có được từng từ đúng chỗ - có quá nhiều khả năng trên màn hình và quá nhiều độc giả không có tư duy thiết kế mà bạn phải quan tâm đến việc ngắt dòng trong tiêu đề của họ. Tra cứu Responsive Web Design để hiểu rõ hơn về các vấn đề này.

Phương pháp hiện tại của tôi ...

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

Và 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; }
}

Độ rộng đôi khi cần một số điều chỉnh dựa trên văn bản thực tế đang được sử dụng, nhưng đây là lược đồ chung tôi sử dụng. Về cơ bản là giảm độ rộng của h1thẻ để dòng bị ngắt ở nơi tôi muốn nó bị đứt.

Điều này không hoạt động, nó chỉ yêu cầu kiểm tra kỹ lưỡng để đảm bảo phá vỡ xảy ra ở nơi mong muốn. Nhưng, sau đó kiểm tra kỹ lưỡng là cần thiết trong bất kỳ sự kiện. Vì vậy, nó không nhất thiết phải làm việc nhiều hơn trong khía cạnh đó.

Bạn có thể thêm white-space: nowrapvà đặt <wbr>tại những nơi bạn muốn cho phép ngắt dòng. Nếu điều này là không đủ và bạn muốn kiểm soát tốt với các truy vấn phương tiện, bạn vẫn có thể thêm các lớp như<wbr class="mobileOnly">

<wbr>doc: https://developer.mozilla.org/en-US/docs/Web/HTML/Euity/wbr