Jakie są najlepsze praktyki radzenia sobie z pożądanymi podziałami linii w responsywnym projektowaniu stron internetowych?

Projektuję wiele prostych pojedynczych stron internetowych na sprzedaż lub pocztę elektroniczną. Często mam problemy z nagłówkami i pożądanymi podziałami linii przy różnych szerokościach mediów.

Na przykład mógłbym mieć taki nagłówek, jak:

Nasz nowy rzecz jest najlepszą rzeczą od krojonego chleba!

Bez absolutnie braku uwagi na łamanie linii, łamanie linii wygląda następująco:

Nasz nowy rzecz jest najlepszą rzeczą od
krojonego chleba!

W pełnym rozmiarze strony chciałbym przerwać linię po „the”. Tworzenie dwóch linii.

Nasz nowy
rzecz jest najlepszą rzeczą od krojonego chleba!

W przypadku ekranu o średniej szerokości złamałbym dwa razy:

Nasz nowy
rzecz jest najlepszą rzeczą
od krojonego chleba!

W przypadku jeszcze węższych ekranów łamałbym się po „nowym”, po „thingamabob” i po „thing”. Tworzenie czterech linii.

Nasz nowy
thingamabob
to najlepsza rzecz
od czasu krojonego chleba!

I naprawdę nie chcesz używać znaczników Break ( <br>), ponieważ takie trudne ustawianie przerwy we wszystkich rozmiarach. Do tej pory używałem zapytań o media i szerokość procentowych dla różnych h1- h5znaczniki tak, że szerokość sił tagów przerwy. Ale wydaje mi się to „hacking” ( czasami jest również bardzo temperamentne w oparciu o rzeczywisty tekst).

Jaki jest najlepszy sposób kontrolowania podziałów linii bez twardego kodowania ich w HTML?

Radzę to tylko na tej podstawie, że używa się go do krótkich fragmentów tekstu, a nie akapitów.

Formatowanie nagłówków może i powinno być kontrolowane w jak największym stopniu w rozsądnych granicach . JavaScript lub dodatkowe niepotrzebne elementy nie są „rozsądnymi limitami” .

Z drugiej strony, niełamliwe spacje ... mogą być przydatne, gdy są używane z umiarem.
Umieszczenie ich między parami słów i trojaczkami, które chcesz zachować razem, może dać pożądane rezultaty.

Jednak nie można używać wielu kolejno, w zależności od długości użytych słów, połączenie zbyt wielu spowoduje, że tekst wyleje się z okienka ekranu lub jego kontenera.

Kilka szybkich eksperymentów na twoim własnym zestawie słów powinno ujawnić najlepsze słowa do połączenia.

Na przykład w tym pytaniu HTML może wyglądać następująco:

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

W rzeczywistości nie ma tutaj potrzeby CSS. CSS w tym przykładzie, który stworzyłem, jest po prostu dla zabawy.

W skrócie, kluczem do tej metody jest ograniczenie liczby miejsc, w których tekst może się łamać.

Po ponownym przeczytaniu pytania zdaję sobie sprawę, że nie do końca spełniłem wymagania. W tym konkretnym przypadku i przy założeniu, że istnieją inne strony, które wymagają takiej samej uwagi, zdefiniowałbym jeden<br> dla punktu przerwania o pełnej szerokości. Następnie użyłbym tej samej klasy na każdej ze stron w najbardziej idealnym miejscu w nagłówku.

Ta <br>klasa zawaliłaby się na czymkolwiek mniejszym niż na całej szerokości, działając tak, jakby jej nawet nie było, przy użyciu zapytań o media. Przy rozmiarach okienek mniejszych niż pełna szerokość polegamy na  tylko na nich.

Kolejny przykład z jednym <br> który jest bliżej znaku.

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

Najlepszą praktyką jest potwierdzenie, że nie masz rzeczywistej kontroli nad łamaniem linii w sieci i najlepiej jest projektować z myślą o tym.

Każde przeciwne rozwiązanie będzie niezmiennie nieznośne. Jak będzie być hack jak HTML nie przywiera do zdefiniowanych przez użytkownika podziały wiersza poza ciężko kodowania. Możesz to zrobić z JS dość łatwo. Skonfiguruj punkty przerwania z pustymi rozpiętościami z unikalnymi klasami, a następnie w oparciu o rozmiar rzutni, do której możesz wstawić tagi BR do każdego pożądanego zakresu.

Istnieje kilka stylów CSS, które będą działać w nowszych przeglądarkach, aby kontrolować sposób, w jaki przeglądarka obsługuje zawijanie wierszy, ale nadal nie da ci dokładnej kontroli, której szukasz w tej sytuacji.

Z drugiej strony, jeśli twoim celem nie jest kontrolowanie określonych podziałów linii, ale aby upewnić się, że blok tekstowy „układa się” we względnie równych wierszach, ustawiłbym szerokość DIV inaczej dla każdej rzutni. Nie będzie idealny, ale prawdopodobnie dość blisko i może być najlepszym kompromisem.

Jest do tego wtyczka jquery, Balance Text .

Jest to wtyczka stworzona przez Adobe,text-wrap: balance; stworzona wraz z propozycją Adobe, aby uzyskać opcję CSS, która działałaby tak jak funkcja Balance Ragged Lines w programie Adobe InDesign (brzmi świetnie, ale nawet jeśli zostanie zaakceptowana, miną lata, zanim przeglądarki ją obsługują).

Wtyczka działa jednak teraz. Równoważy wszystkie elementy, które mają klasę balance-text, lub przy użyciu jQuery jak$('.some-elements').balanceText();

• Oto oficjalna wersja demonstracyjna Adobe , wykorzystująca uzasadniony tekst .

• Oto demo, które zrobiłem przy użyciu wyrównanego do lewej <h1>s - hit edit, aby zobaczyć kod. To pokazuje niektóre ograniczenia w momencie pisania:

Ograniczenia

Ten kod obecnie działa tylko na tekście w tagach na poziomie bloku bez elementów wbudowanych.

W demo 4 zobaczysz, jak wszystko w swoim bloku wyważony tekst jak <a>łącza, <span>S lub nacisk podobnego <em>, <strong>, <b>, <i>etc zostanie usunięty.

Ponadto, porównując wersje demo 1, 2 i 5, zobaczysz, że musisz użyć zarówno klasy CSS, jak i wywołania jQuery.

Wydaje się być umiarkowanie niezawodny, ale czasami nieładny - w chwili pisania czasami odsuwa się, gdy znajduje się w bocznej kolumnie, pozostawiając samotne sieroty (ale wydaje się, że działa przez ponad 95% czasu i jeszcze nie widziałem, żeby się ślizgało, z wyjątkiem gdy znajduje się w kolumnie bocznej) i z niewyjaśnionych powodów moje dema nie działają w Firefoksie, ale dema Adobe działają (dobrze w IE9 +, nie można teraz przetestować w IE8). Jeśli go użyjesz, weź pod uwagę czas testowania.

Muszę sobie z tym poradzić dość regularnie, z wkładem projektantów, którzy chcą, aby coś się zepsuło. Znalazłem najprostszy sposób, aby to zrobić, umieszczając przedział z klasą w tekście, a następnie dostosuj go display: block;do zapytań o media.

Więc wyglądałoby to tak:

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

Potem miałbym CSS z czymś takim:

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

Nadal musisz przejść i dopracować, aby upewnić się, że wszystko idzie tak, jak chcesz dla wszystkich szerokości.

Jeśli jest to częsty problem, możesz utworzyć własny zestaw klas podziału linii, na przykład Twitter Bootstrap lub dowolny inny system siatki, którego używasz, modelując nazwy klas na podstawie jakiejkolwiek konwencji nazewnictwa, której używasz.

Możesz użyć JavaScriptu, aby wykryć szerokość ekranu i napisać poprawną wersję (z <br> takimi, jakie masz w swoim poście) do pustego diva przez innerHTML.

Niestety „pożądane przerwy sieciowe” i „najlepsze praktyki internetowe” nie pasują do siebie. Porzuć swoje perfekcjonistyczne pragnienie, aby każde słowo znalazło się we właściwym miejscu - jest po prostu zbyt wiele możliwości ekranu i zbyt wielu czytelników, którzy nie mają nastawienia projektanta, musisz nawet dbać o podziały linii w ich tytułach. Poszukaj Responsive Web Design, aby lepiej zrozumieć te problemy.

Moja obecna metoda ...

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

I 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; }
}

Szerokości trzeba czasami pewne korekty w oparciu o rzeczywisty tekst używany, ale jest to ogólny schemat używam. Zasadniczo zmniejsza szerokość h1znacznika, tak że linia łamie się tam, gdzie chcę, aby się złamała.

To działa, wymaga jedynie dokładnego przetestowania, aby upewnić się, że przerwy występują w razie potrzeby. Ale w każdym razie potrzebne są dokładne testy. Tak więc niekoniecznie jest to więcej pracy w tym zakresie.

Możesz dodawać white-space: nowrapi umieszczać <wbr>w miejscach, w których chcesz zezwolić na łamanie linii. Jeśli to nie wystarczy i chcesz mieć dobrą kontrolę dzięki zapytaniom o media, nadal możesz dodawać takie klasy<wbr class="mobileOnly">

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