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ł.
Rozdziały w tym poście:
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äglichkeitW przypadku łącznika miękkiego łącznik jest również ustawiany podczas oddzielania.
Podział słów:
Budujesz dzień
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 EversMam 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.
Related Stories
Wyłącz WP-Cron – jak to zrobić!- Co to jest sygnalizator sieci Web lub piksel śledzący?
- Jak zostać blogerem i zarabiać na tym?
- zabronić chatGPT dostępu do treści własnej strony internetowej
- Indeksator linków zwrotnych — jakie jest najlepsze narzędzie?
- Keyword Shitter Test - Znajdź słowa kluczowe z długim ogonem za darmo
- Dzięki tym narzędziom znalezienie odpowiedniego koloru dla strony internetowej nie stanowi problemu
- WordPress: przechowuj dostęp do FTP w wp-config.php
Jens prowadzi bloga od 2012 roku. Pełni rolę Sir Apfelot dla swoich czytelników i pomaga im w problemach natury technicznej. W wolnych chwilach jeździ na elektrycznych monocyklach, robi zdjęcia (najlepiej iPhonem oczywiście), wspina się po górach Hesji lub wędruje z rodziną. Jego artykuły dotyczą produktów Apple, nowości ze świata dronów czy rozwiązań aktualnych błędów.
Świetnie, zawsze są takie małe wskazówki – niezwykle pomocne – dlaczego tak często odwiedzam Twoją witrynę! Dziękuję bardzo!
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ę!
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ę!
Bardzo ładny! :D Dziękuję za twoją opinię.
Doskonały! Takie wskazówki oszczędzają godziny prób i poszukiwań.
Wielkie dzięki za to
Wspaniale. Wtedy nie powstrzymuję się i lubię od czasu do czasu zamieszczać takie krótkie wskazówki. :D
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
Myślę, że w tym przypadku musisz pracować z CSS i umieścić „łączniki: brak” lub „łączniki: instrukcja” w akapicie lub wokół słowa.
Znalazłem Twój artykuł, gdy szukałem, który mogę wykorzystać w Wordpressie również w tekście. Z Thrive Themes nie jest mi łatwo, dlatego napisałem do niej małą wtyczkę z krótkim kodem. Być może będzie to ekscytujące także dla Ciebie i Twoich czytelników. W takim razie mój artykuł znajdziesz tutaj: https://theofel.de/shy-html-entity-in-wordpress-verwenden/
Witaj Jan, fajne rozwiązanie. A także zaprogramowany za pomocą ChatGPT. 😊 Idealnie! Bardzo sympatyczny…