Wskazówka WordPressa: Nagłówki z dzieleniem wyrazów i zamierzone punkty łamania

Dzielenie wyrazów w WordPressie

Dzisiaj miałem przypadek na stronie klienta, że ​​motyw nie zawijał długich słów w nagłówku, gdy witryna była wyświetlana w widoku mobilnym.

Ponieważ nagłówki są wyśrodkowane, na iPhonie możesz zobaczyć tylko słowo, którego brakuje z przodu iz tyłu. To był oczywiście stan, z którego nie mogłem wyjść w takim stanie, w jakim był.

Prosty znacznik HTML może służyć do ustawiania zamierzonych punktów dzielenia wyrazów w nagłówkach.
Prosty znacznik HTML może służyć do ustawiania zamierzonych punktów dzielenia wyrazów w nagłówkach.

Dzielenie wyrazów w WordPressie – możliwości

Badania nad możliwościami dzielenia wyrazów w WordPressie i ogólnie na stronach HTML ujawniły kilka rozwiązań, które chciałbym Państwu tutaj przedstawić:

Dzielenie wyrazów CSS: łączniki

Trudno w to uwierzyć, ale dzielenie wyrazów jest już przewidziane w CSS. Właściwość CSS „hyphens” może mieć wartości „none”, „manual” lub „auto”.

body {
hyphens: auto;
}

W praktyce najczęściej używana będzie wartość „auto”, ponieważ w tym przypadku sama przeglądarka oddziela słowa.

Uwaga: Aby dzielenie wyrazów działało, atrybut HTML „lang” lub „xml:lan” musi być również ustawiony w XML. W przeciwnym razie przeglądarka nie wie, jakiego języka użyć do wykonania swojej pracy.

Miękkie strzępki:

Jeśli zawiniesz znacznik w słowie w nagłówku, słowo zostanie podzielone w tym momencie, jeśli nie ma wystarczającej szerokości, aby wyświetlić słowo w całości.

Przykład:

Nahrungsmittel­­unverträglichkeit

W przypadku łącznika miękkiego łącznik jest również ustawiany podczas oddzielania.

Podział słów:

Budujesz dzień jednym słowem, słowo to zostanie w tym momencie podzielone - jeśli to konieczne - ale nie pojawi się myślnik.

Przykład:

Nahrungsmittel<wbr>unverträglichkeit

Non Breaking Space: Zapobiegaj rozpadowi

Niektórzy mogą być zaznajomieni z terminem „przerwanie przestrzeni”. Jest to przestrzeń, której nie należy wykorzystywać do separacji. Na stronach internetowych tag „Nieprzerywana spacja” umożliwia: &nsbp;

Jeśli zostanie umieszczony między dwoma słowami zamiast normalnej spacji, słowa są zawsze wyświetlane w jednym wierszu.

Przykład:

Horst&nbsp;Evers

Mam nadzieję, że dzięki tej małej wycieczce udało mi się pokazać Wam kilka nowości dotyczących dzielenia wyrazów w WordPressie i HTML. W każdym razie było to dla mnie zupełnie nowe terytorium – z wyjątkiem niezniszczalnej przestrzeni, którą już znałem.

Moje wskazówki i porady dotyczące technologii i Apple

Podobał Ci się artykuł i czy instrukcje na blogu Ci pomogły? Wtedy byłbym szczęśliwy, gdybyś bloga poprzez stałe członkostwo będzie wspierać.

10 odpowiedzi na „Wskazówka WordPress: Nagłówki z dzieleniem wyrazów i punktami podziału”

  1. Świetnie, zawsze są takie małe wskazówki – niezwykle pomocne – dlaczego tak często odwiedzam Twoją witrynę! Dziękuję bardzo!

    1. Jen Kleinholz

      Dziękuję! Twoja opinia jest również bardzo pomocna, ponieważ naprawdę nie wiedziałem, czy rzeczywiście istnieje zainteresowanie tym „niszowym tematem”. :D Ale podobno tak... bardzo się cieszę!

  2. W każdym razie te małe wskazówki w „niszowych tematach” są pomocne, właśnie znowu się czegoś nauczyłem - bardzo dziękuję!

  3. Miła rzecz…

    W tym kontekście nadal szukam sposobu, aby uniemożliwić rozdzielanie łącznika, czyli „-” między dwoma słowami.
    Tłem jest to, że nazwa naszej firmy zawiera myślnik i zawsze źle wygląda, gdy nazwa firmy jest „podarta”. Jest coś podobnego z pokrewnymi nagłówkami, które chciałbym przedstawić z łącznikiem, ale nie rozerwanym...

    Masz pomysł...?
    vlf. Oliviera

    1. Jen Kleinholz

      Myślę, że w tym przypadku musisz pracować z CSS i umieścić „łączniki: brak” lub „łączniki: instrukcja” w akapicie lub wokół słowa.

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone * oznakowane

Na blogu Sir Apfelot znajdziesz porady, instrukcje i recenzje produktów Apple, takich jak iPhone, iPad, Apple Watch, AirPods, iMac, Mac Pro, Mac Mini i Mac Studio.

Promocje
Zakupy
  •  
  •