Czy CSS może wymusić podział wiersza po każdym słowie w elemencie?

Tworzę witrynę wielojęzyczną, a właściciel pomaga mi w tłumaczeniach. Niektóre z wyświetlanych wyrażeń wymagają podziału wiersza, aby zachować styl witryny.

Niestety właściciel nie jest informatykiem, więc jeśli zobaczy foo<br />bar, jest szansa, że ​​w jakiś sposób zmodyfikuje dane podczas tłumaczenia.

Czy istnieje rozwiązanie CSS (poza zmianą szerokości), które można zastosować do elementu, który pęka po każdym słowie?

(Wiem, że mogę to zrobić w PHP, ale zastanawiam się, czy jest sprytna sztuczka, o której nie wiem w CSS, aby osiągnąć to samo, być może w funkcjach CJK.)

EDYTOWAĆ

Spróbuję sporządzić diagram, co się dzieje:

----------------          ----------------
| Short Word   |          | Gargantuan   |
|              |          | Word         |
----------------          ----------------

Długie słowo łamie się automatycznie, krótkie nie. Chcę, żeby wyglądało to tak:

----------------          ----------------
| Short        |          | Gargantuan   |
| Word         |          | Word         |
----------------          ----------------

Posługiwać się

.one-word-per-line {
    word-spacing: <parent-width>; 
}

.your-classname{
    width: min-intrinsic;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    display: table-caption;
    display: -ms-grid;
    -ms-grid-columns: min-content;
}

gdzie <parent-width>jest szerokością elementu nadrzędnego (lub dowolną wysoką wartością, która nie mieści się w jednej linii). W ten sposób możesz być pewien, że po jednej literze występuje nawet koniec wiersza. Działa z Chrome / FF / Opera / IE7 + (a prawdopodobnie nawet IE6, ponieważ obsługuje również odstępy między wyrazami).

Odpowiedź udzielona przez @HursVanBloob działa tylko z kontenerem nadrzędnym o stałej szerokości, ale zawodzi w przypadku kontenerów o płynnej szerokości .

Wypróbowałem wiele właściwości, ale nic nie działało zgodnie z oczekiwaniami. W końcu doszedłem do wniosku, że podanie word-spacingbardzo dużej wartości działa idealnie.

p { word-spacing: 9999999px; }

lub w nowoczesnych przeglądarkach możesz użyć vwjednostki CSS (szerokość wizualna w% rozmiaru ekranu).

p { word-spacing: 100vw; }

Alternatywne rozwiązanie opisano w sekcji Oddziel zdanie do jednego słowa w wierszu , stosując display:table-caption;do elementu

Spróbuj użyć white-space: pre-line;. Tworzy znak końca wiersza w każdym miejscu, w którym pojawia się koniec wiersza w kodzie, ale ignoruje dodatkowe białe znaki (tabulatory i spacje itp.).

Najpierw napisz swoje słowa w oddzielnych wierszach kodu:

<div>Short
Word</div>

Następnie zastosuj styl do elementu zawierającego słowa.

div { white-space: pre-line; }

Uważaj jednak, każdy podział wiersza w kodzie wewnątrz elementu spowoduje podział wiersza. Tak więc napisanie następującego spowoduje dodatkowy podział wiersza przed pierwszym słowem i po ostatnim słowie:

<div>
    Short
    Word
</div>

Jest świetny artykuł na temat sztuczek CSS wyjaśniający inne atrybuty spacji.

Jeśli chcesz mieć możliwość wyboru spośród innych rozwiązań oprócz podanych odpowiedzi ...

Alternatywną metodą jest nadanie kontenerowi szerokości 0 i upewnienie się, że przepełnienie jest widoczne. Wtedy każde słowo wypłynie z niego i znajdzie się w osobnym wierszu.

div {
  width: 0;
  overflow: visible;
}

<div>Short Word</div>
<hr>
<div>Gargantuan Word</div>

Możesz też użyć jednej z tych nowo zaproponowanych widthwartości, pod warunkiem, że nadal będą istnieć w chwili, gdy to przeczytasz.

div {
  width: min-intrinsic;       /* old Chrome, Safari */
  width: -webkit-min-content; /* less old Chrome, Safari */
  width: -moz-min-content;    /* current Firefox */
  width: min-content;         /* current Chrome, Safari; not IE or Edge */
}

<div>Short Word</div>
<hr>
<div>Gargantuan Word</div>

Nie możesz kierować reklamy na każde słowo w CSS. Jednak z odrobiną jQuery prawdopodobnie mógłbyś.

Dzięki jQuery możesz zawijać każde słowo w a, <span>a następnie ustawić zakres CSS, do display:blockktórego umieściłby je w osobnym wierszu.

Oczywiście w teorii: P.

https://jsfiddle.net/bm3Lfcod/1/

Dla tych, którzy szukają rozwiązania działającego w elastycznym kontenerze nadrzędnym z elementami podrzędnymi, które są elastyczne w obu wymiarach. na przykład. przyciski paska nawigacyjnego.

//the parent (example of what it may be)
div {
  display:flex;
  width: 100%;
}

//The children
a {
  display: inline-block;
}

//text wrapper
span {
  display: table-caption;
}

Miałem ten sam problem i żadna z opcji tutaj nie pomogła. Niektóre usługi pocztowe nie obsługują określonych stylów. Oto moja wersja, która rozwiązała problem i działa wszędzie tam, gdzie sprawdziłem:

<table>
    <tr>
        <td width="1">Gargantuan Word</td>
    </tr>
</table>

LUB używając CSS:

<table>
    <tr>
        <td style="width:1px">Gargantuan Word</td>
    </tr>
</table>

Najlepszym rozwiązaniem jest word-spacingwłasność.

Dodaj <p>w kontenerze o określonym rozmiarze (przykład 300px) i po tym, jak musisz dodać ten rozmiar jako wartość w odstępach między wyrazami.

HTML

<div>
 <p>Sentence Here</p>
</div>

CSS

div {
 width: 300px;
}

p {
 width: auto;
 text-align: center;
 word-spacing: 300px;
}

W ten sposób Twoje zdanie będzie zawsze łamane i umieszczane w kolumnie, ale z akapitu będzie dynamiczne.

Tutaj przykład Codepen

W moim przypadku,

    word-break: break-all;

działało perfekcyjnie, mam nadzieję, że pomoże to każdemu nowemu nowicjuszowi, jak ja.