Powiedzmy, że mam ten tekst, który chcę wyświetlić w komórce tabeli HTML:
Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies, Some random cereal with a very long name, Honey Bunches of Oats, Wheaties, Special K, Froot Loops, Apple Jacksi chcę, aby wiersz był preferencyjnie przerywany po jednym z przecinków.
Czy istnieje sposób, aby powiedzieć modułowi renderującemu HTML, aby spróbował złamać w jakimś wyznaczonym miejscu i zrobić to najpierw przed próbą przerwania po jednej ze spacji, bez używania nierozdzielających spacji? Jeśli używam nierozdzielających spacji, bezwarunkowo zwiększa to szerokość. Chcę, aby podział wiersza następował po jednej ze spacji, jeśli algorytm zawijania wierszy wypróbował go najpierw z przecinkami i nie może dopasować wiersza.
Próbowałem zawijać fragmenty tekstu w <span>elementy, ale to nie wydaje się pomagać.
<html>
<head>
<style type="text/css">
div.box { width: 180px; }
table, table td {
border: 1px solid;
border-collapse: collapse;
}
</style>
</head>
<body>
<div class="box">
<table>
<tr>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<td>lorem ipsum</td>
<td>
<span>Honey Nut Cheerios,</span>
<span>Wheat Chex,</span>
<span>Grape-Nuts,</span>
<span>Rice Krispies,</span>
<span>Some random cereal with a very long name,</span>
<span>Honey Bunches of Oats,</span>
<span>Wheaties,</span>
<span>Special K,</span>
<span>Froot Loops,</span>
<span>Apple Jacks</span>
</td>
<td>lorem ipsum</td>
</tr>
</table>
</div>
</body>
</html>uwaga: Wygląda na to, że zachowanie CSS3text-wrap: avoid jest tym, czego chcę, ale nie mogę go zmusić do działania.
Odpowiedzi:
Używając
i zawijając tekst, w którym chcę być razem
będzie najpierw zawinięty w preferowane bloki, a następnie w razie potrzeby w mniejsze fragmenty.
źródło
<span>Hello </span><span> world</span>będąHelloworldi<span>Hello</span> <span>world</span>będą normalneHello world.<wbr>nie wskazuje preferowanego miejsca na przerwanie linii, ale możliwe .<span>s, więc możesz (w efekcie) określić hierarchię preferowanych punktów przerwania.Jest bardzo zgrabne rozwiązanie RWD od Dan Mall, które wolę. Dodam to tutaj, ponieważ niektóre inne pytania dotyczące responsywnych podziałów linii są oznaczone jako duplikaty tego.
W twoim przypadku miałbyś:
I jeden wiersz CSS w zapytaniu o media:
źródło
Prostą odpowiedzią jest użycie znaku spacji o zerowej szerokości.
​Jest on używany do tworzenia odstępów między wyrazami w określonych punktach .Czy dokładnym przeciwieństwem tego non-breaking space
(dobrze, faktycznie słowo-stolarskie⁠) ( word-stolarskie jest zero-width wersja non-breaking space )(istnieją również inne nierozdzielające kody, takie jak nierozdzielający myślnik
‑) (tutaj jest obszerna odpowiedź na temat różnych „wariantów” nbsp )Jeśli potrzebujesz rozwiązania tylko w HTML (bez CSS / JS), możesz użyć kombinacji spacji o zerowej szerokości i spacji nierozdzielającej , jednak byłoby to naprawdę niechlujne , a napisanie wersji czytelnej dla człowieka wymaga trochę wysiłku .
ctrl+ c, ctrl+ vpomaga
przykład:
nieczytelne? to jest ten sam HTML bez tagów komentarza:
Ponieważ jednak renderowanie HTML w wiadomościach e-mail nie jest całkowicie ustandaryzowane, jest dobre do tego rodzaju zastosowań, ponieważ to rozwiązanie nie wykorzystuje CSS / JS
Ponadto, jeśli użyjesz tego w połączeniu z którymkolwiek z
<span>rozwiązań bazujących, będziesz mieć pełną kontrolę nad algorytmem łamania linii(uwaga redakcyjna :)
Jedyny problem, jaki widzę, to to, że chcesz dynamicznie zmieniać punkty preferowanego pęknięcia. Wymagałoby to ciągłej manipulacji w JS na każdym z proporcjonalnych rozmiarów rozpiętości i konieczności obsługi tych elementów HTML w tekście.
źródło
Odpowiedź brzmi: nie ( nie możesz zmienić zastosowanego algorytmu łamania linii ).
Ale są pewne obejścia ( najlepszym z nich jest zaakceptowana odpowiedź )
Możesz zbliżyć się do nierozdzielającej spacji,
ale tylko między słowami, które idą razem ( co masz w rozpiętości, ale nie po przecinku ), lub możesz użyć,white-space:nowrapjak wspomniano w @Marcel.Oba rozwiązania robią to samo i oba nie zniszczą grupy słów, jeśli same nie będą pasować.
źródło
Z marżą powyżej użyj
span { white-space:nowrap }. Jest tak dobre, jak można się spodziewać.źródło
spanelemencie na i zapobiega ich pękaniu. Chcę tylko zniechęcić moduł renderujący do włamania się między jeden z moich elementów, ale jeśli musi, chcę, aby to zrobił. <wbr>różni się od przestrzeni? Z tego co wiem, wybór jest taki, że dana postać pozwala na przerwę lub nie. Tak więc „-” i „” oraz​i<wbr>i­wszystkie pozwalają na przerwę (odpowiednio wypisywanie łącznika, spacji, nic, nic i łącznika tylko przy łamaniu), podczas gdy nie.Nowa odpowiedź teraz mamy HTML5:
HTML5 wprowadza
<wbr>tag. (To oznacza możliwość przełamania słów).Dodanie znaku „
<wbr>mówi” przeglądarce, aby przerwała to miejsce wcześniej niż gdziekolwiek indziej, więc łatwo jest podzielić słowa po przecinkach:Obsługuje wszystkie moje główne przeglądarki oprócz IE.
źródło
<wbr>ma inny cel. Nie wspominając o tym, że ta odpowiedź jest duplikatem odpowiedzi, która istniała dawno temu.<wbr>po prostu ustawia okazję do przerwy; nie „mówi przeglądarce, aby przerwała to wcześniej niż gdziekolwiek indziej”. Używane przed spacją, zwykle jest bezużyteczne, ponieważ spacje są zwykle możliwościami podziału linii.<wbr>nie nie priorytet podział wiersza nad zwykłej spacji. Tak więc w przykładzie zawijanie przebiega normalnie.Możesz po prostu dostosować ustawienia marginesów w CSS (w tym przypadku margin-right).
źródło
Użyj
<div>zamiast<span>lub określ klasę dla SPAN i nadaj jej atrybut display: block .źródło
Jest to element HTML do tej ™: (obecnie standaryzowane)
<wbr>elementem .Radziłbym ci to wykorzystać. Może nie działać wszędzie , ale to najlepsze, co możesz zrobić bez przechodzenia przez obręcze.
źródło
<wbr>służy do zaznaczania punktów przerwania przy bardzo długich słowach, nie rozwiązuje problemu z preferowanymi podziałami wierszawbrElement reprezentuje możliwość podziału wiersza.” Właśnie o to prosił OP. Przestań głosować w dół na podstawie tego, co czytasz na wiki.<wbr>.