Question

Столкнувшись с трудностями в отображении двух списков слов, требующих некоторых советов.

Что я хочу сделать, так это отобразить список двух слов по сторонам экрана, в некоторой степени как фоновое облако, выровняв их по css direction ( слева направо , вправо влево )

Использование calc или grid не дает мне ничего лучшего, чем следующий фрагмент.

#suggestL {top:0;left:0;position:fixed;width:32%;direction:rtl ;font-size:9px}


#suggestR {top:0;right:0;position:fixed;width:32%;direction:ltr ;font-size:9px}

<div id=suggestL>
 <a>STICK</a> <a>HOUSE</a> <a>HANDS</a> <a>WOMAN</a> <a>WOMEN</a> <a>BUNNY</a> <a>BLOND</a> <a>SHAPE</a> <a>SWEAT</a> <a>TREND</a> <a>PHONE</a> <a>MARKS</a> <a>SKULL</a> <a>ANGER</a> <a>TEARS</a> <a>QUILT</a> <a>TRAIN</a> <a>ENTRY</a> <a>QUICK</a> <a>CAPUT</a> <a>HORSE</a> <a>SUPER</a> <a>SHAFT</a> <a>DOING</a> <a>LOTUS</a> <a>RETURN</a> <a>LETTER</a> <a>SQUARE</a> <a>SYSTEM</a> <a>DOUBLE</a> <a>MIDDLE</a> <a>TURNED</a> <a>SCRIPT</a> <a>BARRED</a> <a>LAMBDA</a> <a>DENTAL</a> <a>OGONEK</a> <a>STROKE</a> <a>CLOSED</a> <a>VOICED</a> <a>RHOTIC</a> <a>RAISED</a> <a>ACCENT</a> <a>BRIDGE</a> <a>MACRON</a> <a>EQUALS</a> <a>ALMOST</a> <a>ZIGZAG</a> <a>LUNATE</a> <a>DOTTED</a> <a>CURLED</a> <a>TAILED</a> <a>LITTLE</a> <a>GERESH</a> <a>QARNEY</a> <a>MERKHA</a> <a>MASORA</a> <a>DAGESH</a> <a>QAMATS</a> <a>NUMBER</a> <a>FOURTH</a> <a>POETIC</a> <a>ALAYHE</a> <a>TRIPLE</a> <a>MADDAH</a> <a>HAMZAH</a> 
<a>DDAHAL</a> <a>GHUNNA</a> <a>UIGHUR</a> <a>KAZAKH</a> <a>SHADDA</a> <a>RASOUL</a> <a>SESAME</a> <a>DOLLAR</a> <a>FATHAH</a> <a>DAMMAH</a> <a>KASRAH</a> <a>VESSEL</a> <a>NINETY</a> <a>WEIGHT</a> <a>LIQUID</a> <a>NAXIAN</a> <a>THIRDS</a> <a>TALENT</a> <a>OUNKIA</a> <a>XESTES</a> <a>ARTABE</a> <a>AROURA</a> <a>GRAMMA</a> <a>PLUMED</a> <a>PERMIC</a> <a>WITHIN</a> <a>TURKIC</a> <a>ORKHON</a> <a>SANDHI</a> <a>KISIM5</a> <a>KASKAL</a> <a>NINDA2</a> <a>ILIMMU</a> <a>SIXTHS</a> <a>BAHAR2</a> <a>KUSHU2</a> <a>SHINDA</a> <a>NGGUOQ</a> <a>TXHEEJ</a> <a>INSIDE</a> <a>PERNIN</a> <a>FORMAT</a> <a>VAREIA</a> <a>OLIGON</a> <a>GORGON</a> <a>OXEIAI</a> <a>PIASMA</a> <a>FTHORA</a> <a>KATAVA</a> <a>MIKRON</a> <a>ETERON</a> <a>SEISMA</a> <a>KLASMA</a> <a>LEIMMA</a> <a>PROTOS</a> <a>TRITOS</a> <a>ISAKIA</a> <a>TELOUS</a> <a>CHROMA</a> <a>FHTORA</a> <a>YFESIS</a> <a>DIESIS</a> <a>GENIKI</a> <a>ARSEOS</a> <a>BREATH</a> <a>OTTAVA</a> <a>COMMON</a> <a>DEGREE</a> <a>MINIMA</a> <a>BREVIS</a> <a>TEMPUS</a> <a>KIEVAN</a>
<a>QUARTERS</a> <a>QUADRANT</a> <a>FROWNING</a> <a>DRAUGHTS</a> <a>CROSSING</a> <a>LOCATION</a> <a>OUTLINED</a> <a>PINWHEEL</a> <a>PETALLED</a> <a>SHADOWED</a> 
<a>S-SHAPED</a> <a>DIRECTLY</a> <a>OPERATOR</a> <a>INTEGRAL</a> <a>INTERIOR</a> <a>NEGATION</a> <a>U-SHAPED</a> <a>CIRCLING</a> <a>POSITION</a> <a>LATINATE</a> <a>TAILLESS</a> <a>AKHMIMIC</a> <a>L-SHAPED</a> <a>SPIRITUS</a> <a>BOHAIRIC</a> <a>INDIRECT</a> <a>OMISSION</a> <a>SURROUND</a> <a>STANDARD</a> <a>ENTERING</a>
<a>POMMEE</a> <a>THUMBS</a> <a>FLOPPY</a> <a>BUTTON</a> <a>SPEECH</a> <a>CRYING</a> <a>BOWING</a> <a>PERSON</a> <a>FOLDED</a> <a>BULLET</a> <a>POLICE</a> <a>LITTER</a> <a>CROCUS</a> <a>COPPER</a> <a>SHADED</a> <a>FORMEE</a> <a>COWBOY</a> 
</div>
 
<div id=suggestR>
<a>HAMZAT</a> <a>BARREE</a> <a>CENTRE</a> <a>FILLED</a> <a>SINDHI</a> <a>SKEWED</a> <a>DALATH</a> <a>PTHAHA</a> <a>ZQAPHA</a> <a>ARABIC</a> <a>RISING</a> <a>SYMBOL</a> <a>CANDRA</a> <a>STRESS</a> <a>KHANDA</a> <a>LENGTH</a> <a>CIRCLE</a> <a>CREDIT</a> <a>POWERS</a> <a>CHILLU</a> <a>SINGLE</a> <a>SPUNGS</a> <a>-KHYUD</a> <a>RNYING</a> <a>SVASTI</a> <a>MEDIAL</a> <a>KHAMTI</a> <a>LABIAL</a> <a>Y-CREE</a> <a>BOTTOM</a> <a>SAYISI</a> <a>R-CREE</a> <a>N-CREE</a> <a>HAGLAZ</a> <a>NAUDIZ</a> <a>PERTHO</a> <a>PEORTH</a> <a>SOWILO</a> <a>MANNAZ</a> <a>LAUKAZ</a> <a>ARLAUG</a> <a>FRANKS</a> <a>CASKET</a> <a>SAMYOK</a> <a>CAMNUC</a> <a>PHNAEK</a> <a>MANCHU</a> <a>BEAVER</a> <a>WIGGLY</a> <a>STRONG</a> <a>TALING</a> <a>ASYURA</a> <a>KEMPUL</a> <a>KEMPLI</a> <a>PAKPAK</a> <a>THYOOM</a> <a>TSHOOK</a> <a>NARROW</a> <a>UDATTA</a> <a>RTHANG</a> <a>KAVYKA</a> <a>SHEQEL</a> <a>UPWARD</a> <a>ITALIC</a> <a>HEADED</a> <a>CORNER</a> <a>PAIRED</a> <a>DASHED</a> <a>SUBSET</a> <a>NORMAL</a> <a>FACTOR</a> <a>SQUISH</a> <a>H-TYPE</a> <a>L-TYPE</a> <a>SCREEN</a> <a>SHORTS</a> <a>MEDIUM</a> <a>ON-OFF</a> <a>DEVICE</a> <a>RECORD</a> <a>DELETE</a> <a>BRANCH</a> <a>AMOUNT</a> <a>ELEVEN</a> <a>TWELVE</a> <a>TWENTY</a> <a>EIGHTH</a> <a>FLORAL</a> <a>SYRIAC</a> <a>TYPE-1</a> <a>TYPE-2</a> <a>TYPE-3</a> <a>TYPE-4</a> <a>TYPE-5</a> <a>TYPE-6</a> <a>TYPE-7</a> <a>LESSER</a> <a>FEMALE</a> <a>BEHIND</a> <a>SAFETY</a> <a>BALLOT</a> <a>CENTER</a> <a>SPOKED</a> <a>CURVED</a> <a>GAPPED</a> <a>BESIDE</a> <a>ENDING</a> <a>JOINED</a> <a>SERIFS</a> <a>AROUND</a> <a>SCHEMA</a> <a>DOMAIN</a> <a>NESTED</a> <a>MEMBER</a> <a>DIVIDE</a> <a>BINARY</a> <a>HOOKED</a> <a>ARROWS</a> <a>COPTIC</a> <a>NUBIAN</a> <a>DIRECT</a> <a>BERBER</a> <a>TUAREG</a> <a>FORKED</a> <a>SECOND</a> <a>SPIRIT</a> <a>TANNED</a> <a>HIDING</a> <a>REPEAT</a> <a>POSTAL</a> <a>GIYEOG</a> <a>YEOLIN</a> <a>GYEONG</a> <a>HEAVEN</a> <a>HANGUL</a> <a>KIYEOK</a> <a>TIKEUT</a> <a>KOREAN</a> <a>THIRTY</a> <a>EIGHTY</a> <a>BITING</a> <a>COMING</a> <a>GENTLE</a> <a>JOYOUS</a> <a>BEFORE</a> <a>BROKEN</a> <a>POETRY</a> <a>OPEN-O</a> <a>SAMEKH</a> <a>TTEHEH</a>  <a>HINGED</a> <a>SPREAD</a> <a>CUPPED</a> <a>ANGLED</a> <a>RIPPLE</a> <a>OTHERS</a> <a>STRIKE</a> <a>FINGER</a> <a>SPIRAL</a> <a>DREAMY</a> <a>CHEEKS</a> <a>TONGUE</a> <a>LOOPED</a> <a>KNIGHT</a> <a>BOTTLE</a> <a>HOCKEY</a> <a>TENNIS</a> <a>PADDLE</a> <a>CAPPED</a> <a>TELLER</a> <a>POINTS</a> <a>FACING</a> <a>MOBILE</a> <a>ORANGE</a>
<a>CLINGING</a> <a>AROUSING</a> <a>MARRYING</a> <a>SQUIRREL</a> <a>QUANTITY</a> <a>LOGOGRAM</a> <a>BASELINE</a> <a>DAMMATAN</a> <a>KASRATAN</a>
</div>

Использование моноширинного шрифта обеспечивает что-то близкое к тому, что я ищу:

#suggestL {top:0;left:0;position:fixed;width:32%;direction:rtl ;font-size:9px;font-family:monospace}


#suggestR {top:0;right:0;position:fixed;width:32%;direction:ltr ;font-size:9px;font-family:monospace}

<div id=suggestL>
 <a>STICK</a> <a>HOUSE</a> <a>HANDS</a> <a>WOMAN</a> <a>WOMEN</a> <a>BUNNY</a> <a>BLOND</a> <a>SHAPE</a> <a>SWEAT</a> <a>TREND</a> <a>PHONE</a> <a>MARKS</a> <a>SKULL</a> <a>ANGER</a> <a>TEARS</a> <a>QUILT</a> <a>TRAIN</a> <a>ENTRY</a> <a>QUICK</a> <a>CAPUT</a> <a>HORSE</a> <a>SUPER</a> <a>SHAFT</a> <a>DOING</a> <a>LOTUS</a> <a>RETURN</a> <a>LETTER</a> <a>SQUARE</a> <a>SYSTEM</a> <a>DOUBLE</a> <a>MIDDLE</a> <a>TURNED</a> <a>SCRIPT</a> <a>BARRED</a> <a>LAMBDA</a> <a>DENTAL</a> <a>OGONEK</a> <a>STROKE</a> <a>CLOSED</a> <a>VOICED</a> <a>RHOTIC</a> <a>RAISED</a> <a>ACCENT</a> <a>BRIDGE</a> <a>MACRON</a> <a>EQUALS</a> <a>ALMOST</a> <a>ZIGZAG</a> <a>LUNATE</a> <a>DOTTED</a> <a>CURLED</a> <a>TAILED</a> <a>LITTLE</a> <a>GERESH</a> <a>QARNEY</a> <a>MERKHA</a> <a>MASORA</a> <a>DAGESH</a> <a>QAMATS</a> <a>NUMBER</a> <a>FOURTH</a> <a>POETIC</a> <a>ALAYHE</a> <a>TRIPLE</a> <a>MADDAH</a> <a>HAMZAH</a> 
<a>DDAHAL</a> <a>GHUNNA</a> <a>UIGHUR</a> <a>KAZAKH</a> <a>SHADDA</a> <a>RASOUL</a> <a>SESAME</a> <a>DOLLAR</a> <a>FATHAH</a> <a>DAMMAH</a> <a>KASRAH</a> <a>VESSEL</a> <a>NINETY</a> <a>WEIGHT</a> <a>LIQUID</a> <a>NAXIAN</a> <a>THIRDS</a> <a>TALENT</a> <a>OUNKIA</a> <a>XESTES</a> <a>ARTABE</a> <a>AROURA</a> <a>GRAMMA</a> <a>PLUMED</a> <a>PERMIC</a> <a>WITHIN</a> <a>TURKIC</a> <a>ORKHON</a> <a>SANDHI</a> <a>KISIM5</a> <a>KASKAL</a> <a>NINDA2</a> <a>ILIMMU</a> <a>SIXTHS</a> <a>BAHAR2</a> <a>KUSHU2</a> <a>SHINDA</a> <a>NGGUOQ</a> <a>TXHEEJ</a> <a>INSIDE</a> <a>PERNIN</a> <a>FORMAT</a> <a>VAREIA</a> <a>OLIGON</a> <a>GORGON</a> <a>OXEIAI</a> <a>PIASMA</a> <a>FTHORA</a> <a>KATAVA</a> <a>MIKRON</a> <a>ETERON</a> <a>SEISMA</a> <a>KLASMA</a> <a>LEIMMA</a> <a>PROTOS</a> <a>TRITOS</a> <a>ISAKIA</a> <a>TELOUS</a> <a>CHROMA</a> <a>FHTORA</a> <a>YFESIS</a> <a>DIESIS</a> <a>GENIKI</a> <a>ARSEOS</a> <a>BREATH</a> <a>OTTAVA</a> <a>COMMON</a> <a>DEGREE</a> <a>MINIMA</a> <a>BREVIS</a> <a>TEMPUS</a> <a>KIEVAN</a>
<a>QUARTERS</a> <a>QUADRANT</a> <a>FROWNING</a> <a>DRAUGHTS</a> <a>CROSSING</a> <a>LOCATION</a> <a>OUTLINED</a> <a>PINWHEEL</a> <a>PETALLED</a> <a>SHADOWED</a> 
<a>S-SHAPED</a> <a>DIRECTLY</a> <a>OPERATOR</a> <a>INTEGRAL</a> <a>INTERIOR</a> <a>NEGATION</a> <a>U-SHAPED</a> <a>CIRCLING</a> <a>POSITION</a> <a>LATINATE</a> <a>TAILLESS</a> <a>AKHMIMIC</a> <a>L-SHAPED</a> <a>SPIRITUS</a> <a>BOHAIRIC</a> <a>INDIRECT</a> <a>OMISSION</a> <a>SURROUND</a> <a>STANDARD</a> <a>ENTERING</a>
<a>POMMEE</a> <a>THUMBS</a> <a>FLOPPY</a> <a>BUTTON</a> <a>SPEECH</a> <a>CRYING</a> <a>BOWING</a> <a>PERSON</a> <a>FOLDED</a> <a>BULLET</a> <a>POLICE</a> <a>LITTER</a> <a>CROCUS</a> <a>COPPER</a> <a>SHADED</a> <a>FORMEE</a> <a>COWBOY</a> 
</div>
 
<div id=suggestR>
<a>HAMZAT</a> <a>BARREE</a> <a>CENTRE</a> <a>FILLED</a> <a>SINDHI</a> <a>SKEWED</a> <a>DALATH</a> <a>PTHAHA</a> <a>ZQAPHA</a> <a>ARABIC</a> <a>RISING</a> <a>SYMBOL</a> <a>CANDRA</a> <a>STRESS</a> <a>KHANDA</a> <a>LENGTH</a> <a>CIRCLE</a> <a>CREDIT</a> <a>POWERS</a> <a>CHILLU</a> <a>SINGLE</a> <a>SPUNGS</a> <a>-KHYUD</a> <a>RNYING</a> <a>SVASTI</a> <a>MEDIAL</a> <a>KHAMTI</a> <a>LABIAL</a> <a>Y-CREE</a> <a>BOTTOM</a> <a>SAYISI</a> <a>R-CREE</a> <a>N-CREE</a> <a>HAGLAZ</a> <a>NAUDIZ</a> <a>PERTHO</a> <a>PEORTH</a> <a>SOWILO</a> <a>MANNAZ</a> <a>LAUKAZ</a> <a>ARLAUG</a> <a>FRANKS</a> <a>CASKET</a> <a>SAMYOK</a> <a>CAMNUC</a> <a>PHNAEK</a> <a>MANCHU</a> <a>BEAVER</a> <a>WIGGLY</a> <a>STRONG</a> <a>TALING</a> <a>ASYURA</a> <a>KEMPUL</a> <a>KEMPLI</a> <a>PAKPAK</a> <a>THYOOM</a> <a>TSHOOK</a> <a>NARROW</a> <a>UDATTA</a> <a>RTHANG</a> <a>KAVYKA</a> <a>SHEQEL</a> <a>UPWARD</a> <a>ITALIC</a> <a>HEADED</a> <a>CORNER</a> <a>PAIRED</a> <a>DASHED</a> <a>SUBSET</a> <a>NORMAL</a> <a>FACTOR</a> <a>SQUISH</a> <a>H-TYPE</a> <a>L-TYPE</a> <a>SCREEN</a> <a>SHORTS</a> <a>MEDIUM</a> <a>ON-OFF</a> <a>DEVICE</a> <a>RECORD</a> <a>DELETE</a> <a>BRANCH</a> <a>AMOUNT</a> <a>ELEVEN</a> <a>TWELVE</a> <a>TWENTY</a> <a>EIGHTH</a> <a>FLORAL</a> <a>SYRIAC</a> <a>TYPE-1</a> <a>TYPE-2</a> <a>TYPE-3</a> <a>TYPE-4</a> <a>TYPE-5</a> <a>TYPE-6</a> <a>TYPE-7</a> <a>LESSER</a> <a>FEMALE</a> <a>BEHIND</a> <a>SAFETY</a> <a>BALLOT</a> <a>CENTER</a> <a>SPOKED</a> <a>CURVED</a> <a>GAPPED</a> <a>BESIDE</a> <a>ENDING</a> <a>JOINED</a> <a>SERIFS</a> <a>AROUND</a> <a>SCHEMA</a> <a>DOMAIN</a> <a>NESTED</a> <a>MEMBER</a> <a>DIVIDE</a> <a>BINARY</a> <a>HOOKED</a> <a>ARROWS</a> <a>COPTIC</a> <a>NUBIAN</a> <a>DIRECT</a> <a>BERBER</a> <a>TUAREG</a> <a>FORKED</a> <a>SECOND</a> <a>SPIRIT</a> <a>TANNED</a> <a>HIDING</a> <a>REPEAT</a> <a>POSTAL</a> <a>GIYEOG</a> <a>YEOLIN</a> <a>GYEONG</a> <a>HEAVEN</a> <a>HANGUL</a> <a>KIYEOK</a> <a>TIKEUT</a> <a>KOREAN</a> <a>THIRTY</a> <a>EIGHTY</a> <a>BITING</a> <a>COMING</a> <a>GENTLE</a> <a>JOYOUS</a> <a>BEFORE</a> <a>BROKEN</a> <a>POETRY</a> <a>OPEN-O</a> <a>SAMEKH</a> <a>TTEHEH</a>  <a>HINGED</a> <a>SPREAD</a> <a>CUPPED</a> <a>ANGLED</a> <a>RIPPLE</a> <a>OTHERS</a> <a>STRIKE</a> <a>FINGER</a> <a>SPIRAL</a> <a>DREAMY</a> <a>CHEEKS</a> <a>TONGUE</a> <a>LOOPED</a> <a>KNIGHT</a> <a>BOTTLE</a> <a>HOCKEY</a> <a>TENNIS</a> <a>PADDLE</a> <a>CAPPED</a> <a>TELLER</a> <a>POINTS</a> <a>FACING</a> <a>MOBILE</a> <a>ORANGE</a>
<a>CLINGING</a> <a>AROUSING</a> <a>MARRYING</a> <a>SQUIRREL</a> <a>QUANTITY</a> <a>LOGOGRAM</a> <a>BASELINE</a> <a>DAMMATAN</a> <a>KASRATAN</a>
</div>

Как вы уже догадались с этими двумя примерами, я стараюсь избегать пробелов в столбцах.

Мой список слов имеет разную длину слова, но слова могут быть расплавлены.

Какова простейшая возможность, кроме корректировки полей с отрицательным значением, при котором некоторые слова будут скрыты от смещения?

* Нет пробелов в списках слов, это то, что я хочу сделать, сохраняя весь список на экране : *

Для этого css равен off limit для этого, следует ли мне выполнить некоторые действия с использованием javascript, сортировки по длине слова, вычислением смещения в пикселях, одновременно заботясь об отзывчивости (..)?

Решено, очень просто, спасибо всем!

#suggestL {top:0;left:0;position:fixed;width:32%;direction:rtl ;font-size:9px;font-family:monospace; text-align: justify}


#suggestR {top:0;right:0;position:fixed;width:32%;direction:ltr ;font-size:9px;font-family:monospace; text-align: justify}

<div id=suggestL>
 <a>STICK</a> <a>HOUSE</a> <a>HANDS</a> <a>WOMAN</a> <a>WOMEN</a> <a>BUNNY</a> <a>BLOND</a> <a>SHAPE</a> <a>SWEAT</a> <a>TREND</a> <a>PHONE</a> <a>MARKS</a> <a>SKULL</a> <a>ANGER</a> <a>TEARS</a> <a>QUILT</a> <a>TRAIN</a> <a>ENTRY</a> <a>QUICK</a> <a>CAPUT</a> <a>HORSE</a> <a>SUPER</a> <a>SHAFT</a> <a>DOING</a> <a>LOTUS</a> <a>RETURN</a> <a>LETTER</a> <a>SQUARE</a> <a>SYSTEM</a> <a>DOUBLE</a> <a>MIDDLE</a> <a>TURNED</a> <a>SCRIPT</a> <a>BARRED</a> <a>LAMBDA</a> <a>DENTAL</a> <a>OGONEK</a> <a>STROKE</a> <a>CLOSED</a> <a>VOICED</a> <a>RHOTIC</a> <a>RAISED</a> <a>ACCENT</a> <a>BRIDGE</a> <a>MACRON</a> <a>EQUALS</a> <a>ALMOST</a> <a>ZIGZAG</a> <a>LUNATE</a> <a>DOTTED</a> <a>CURLED</a> <a>TAILED</a> <a>LITTLE</a> <a>GERESH</a> <a>QARNEY</a> <a>MERKHA</a> <a>MASORA</a> <a>DAGESH</a> <a>QAMATS</a> <a>NUMBER</a> <a>FOURTH</a> <a>POETIC</a> <a>ALAYHE</a> <a>TRIPLE</a> <a>MADDAH</a> <a>HAMZAH</a> 
<a>DDAHAL</a> <a>GHUNNA</a> <a>UIGHUR</a> <a>KAZAKH</a> <a>SHADDA</a> <a>RASOUL</a> <a>SESAME</a> <a>DOLLAR</a> <a>FATHAH</a> <a>DAMMAH</a> <a>KASRAH</a> <a>VESSEL</a> <a>NINETY</a> <a>WEIGHT</a> <a>LIQUID</a> <a>NAXIAN</a> <a>THIRDS</a> <a>TALENT</a> <a>OUNKIA</a> <a>XESTES</a> <a>ARTABE</a> <a>AROURA</a> <a>GRAMMA</a> <a>PLUMED</a> <a>PERMIC</a> <a>WITHIN</a> <a>TURKIC</a> <a>ORKHON</a> <a>SANDHI</a> <a>KISIM5</a> <a>KASKAL</a> <a>NINDA2</a> <a>ILIMMU</a> <a>SIXTHS</a> <a>BAHAR2</a> <a>KUSHU2</a> <a>SHINDA</a> <a>NGGUOQ</a> <a>TXHEEJ</a> <a>INSIDE</a> <a>PERNIN</a> <a>FORMAT</a> <a>VAREIA</a> <a>OLIGON</a> <a>GORGON</a> <a>OXEIAI</a> <a>PIASMA</a> <a>FTHORA</a> <a>KATAVA</a> <a>MIKRON</a> <a>ETERON</a> <a>SEISMA</a> <a>KLASMA</a> <a>LEIMMA</a> <a>PROTOS</a> <a>TRITOS</a> <a>ISAKIA</a> <a>TELOUS</a> <a>CHROMA</a> <a>FHTORA</a> <a>YFESIS</a> <a>DIESIS</a> <a>GENIKI</a> <a>ARSEOS</a> <a>BREATH</a> <a>OTTAVA</a> <a>COMMON</a> <a>DEGREE</a> <a>MINIMA</a> <a>BREVIS</a> <a>TEMPUS</a> <a>KIEVAN</a>
<a>QUARTERS</a> <a>QUADRANT</a> <a>FROWNING</a> <a>DRAUGHTS</a> <a>CROSSING</a> <a>LOCATION</a> <a>OUTLINED</a> <a>PINWHEEL</a> <a>PETALLED</a> <a>SHADOWED</a> 
<a>S-SHAPED</a> <a>DIRECTLY</a> <a>OPERATOR</a> <a>INTEGRAL</a> <a>INTERIOR</a> <a>NEGATION</a> <a>U-SHAPED</a> <a>CIRCLING</a> <a>POSITION</a> <a>LATINATE</a> <a>TAILLESS</a> <a>AKHMIMIC</a> <a>L-SHAPED</a> <a>SPIRITUS</a> <a>BOHAIRIC</a> <a>INDIRECT</a> <a>OMISSION</a> <a>SURROUND</a> <a>STANDARD</a> <a>ENTERING</a>
<a>POMMEE</a> <a>THUMBS</a> <a>FLOPPY</a> <a>BUTTON</a> <a>SPEECH</a> <a>CRYING</a> <a>BOWING</a> <a>PERSON</a> <a>FOLDED</a> <a>BULLET</a> <a>POLICE</a> <a>LITTER</a> <a>CROCUS</a> <a>COPPER</a> <a>SHADED</a> <a>FORMEE</a> <a>COWBOY</a> 
</div>
 
<div id=suggestR>
<a>HAMZAT</a> <a>BARREE</a> <a>CENTRE</a> <a>FILLED</a> <a>SINDHI</a> <a>SKEWED</a> <a>DALATH</a> <a>PTHAHA</a> <a>ZQAPHA</a> <a>ARABIC</a> <a>RISING</a> <a>SYMBOL</a> <a>CANDRA</a> <a>STRESS</a> <a>KHANDA</a> <a>LENGTH</a> <a>CIRCLE</a> <a>CREDIT</a> <a>POWERS</a> <a>CHILLU</a> <a>SINGLE</a> <a>SPUNGS</a> <a>-KHYUD</a> <a>RNYING</a> <a>SVASTI</a> <a>MEDIAL</a> <a>KHAMTI</a> <a>LABIAL</a> <a>Y-CREE</a> <a>BOTTOM</a> <a>SAYISI</a> <a>R-CREE</a> <a>N-CREE</a> <a>HAGLAZ</a> <a>NAUDIZ</a> <a>PERTHO</a> <a>PEORTH</a> <a>SOWILO</a> <a>MANNAZ</a> <a>LAUKAZ</a> <a>ARLAUG</a> <a>FRANKS</a> <a>CASKET</a> <a>SAMYOK</a> <a>CAMNUC</a> <a>PHNAEK</a> <a>MANCHU</a> <a>BEAVER</a> <a>WIGGLY</a> <a>STRONG</a> <a>TALING</a> <a>ASYURA</a> <a>KEMPUL</a> <a>KEMPLI</a> <a>PAKPAK</a> <a>THYOOM</a> <a>TSHOOK</a> <a>NARROW</a> <a>UDATTA</a> <a>RTHANG</a> <a>KAVYKA</a> <a>SHEQEL</a> <a>UPWARD</a> <a>ITALIC</a> <a>HEADED</a> <a>CORNER</a> <a>PAIRED</a> <a>DASHED</a> <a>SUBSET</a> <a>NORMAL</a> <a>FACTOR</a> <a>SQUISH</a> <a>H-TYPE</a> <a>L-TYPE</a> <a>SCREEN</a> <a>SHORTS</a> <a>MEDIUM</a> <a>ON-OFF</a> <a>DEVICE</a> <a>RECORD</a> <a>DELETE</a> <a>BRANCH</a> <a>AMOUNT</a> <a>ELEVEN</a> <a>TWELVE</a> <a>TWENTY</a> <a>EIGHTH</a> <a>FLORAL</a> <a>SYRIAC</a> <a>TYPE-1</a> <a>TYPE-2</a> <a>TYPE-3</a> <a>TYPE-4</a> <a>TYPE-5</a> <a>TYPE-6</a> <a>TYPE-7</a> <a>LESSER</a> <a>FEMALE</a> <a>BEHIND</a> <a>SAFETY</a> <a>BALLOT</a> <a>CENTER</a> <a>SPOKED</a> <a>CURVED</a> <a>GAPPED</a> <a>BESIDE</a> <a>ENDING</a> <a>JOINED</a> <a>SERIFS</a> <a>AROUND</a> <a>SCHEMA</a> <a>DOMAIN</a> <a>NESTED</a> <a>MEMBER</a> <a>DIVIDE</a> <a>BINARY</a> <a>HOOKED</a> <a>ARROWS</a> <a>COPTIC</a> <a>NUBIAN</a> <a>DIRECT</a> <a>BERBER</a> <a>TUAREG</a> <a>FORKED</a> <a>SECOND</a> <a>SPIRIT</a> <a>TANNED</a> <a>HIDING</a> <a>REPEAT</a> <a>POSTAL</a> <a>GIYEOG</a> <a>YEOLIN</a> <a>GYEONG</a> <a>HEAVEN</a> <a>HANGUL</a> <a>KIYEOK</a> <a>TIKEUT</a> <a>KOREAN</a> <a>THIRTY</a> <a>EIGHTY</a> <a>BITING</a> <a>COMING</a> <a>GENTLE</a> <a>JOYOUS</a> <a>BEFORE</a> <a>BROKEN</a> <a>POETRY</a> <a>OPEN-O</a> <a>SAMEKH</a> <a>TTEHEH</a>  <a>HINGED</a> <a>SPREAD</a> <a>CUPPED</a> <a>ANGLED</a> <a>RIPPLE</a> <a>OTHERS</a> <a>STRIKE</a> <a>FINGER</a> <a>SPIRAL</a> <a>DREAMY</a> <a>CHEEKS</a> <a>TONGUE</a> <a>LOOPED</a> <a>KNIGHT</a> <a>BOTTLE</a> <a>HOCKEY</a> <a>TENNIS</a> <a>PADDLE</a> <a>CAPPED</a> <a>TELLER</a> <a>POINTS</a> <a>FACING</a> <a>MOBILE</a> <a>ORANGE</a>
<a>CLINGING</a> <a>AROUSING</a> <a>MARRYING</a> <a>SQUIRREL</a> <a>QUANTITY</a> <a>LOGOGRAM</a> <a>BASELINE</a> <a>DAMMATAN</a> <a>KASRATAN</a>
</div>

andreas · Answer 1 · 25 апреля 2018

Вы можете просто использовать text-align: justify;, чтобы распределить слова по всей строке из-за увеличения существующих пробелов.

#suggestL,
#suggestR {
  top: 0;
  position: fixed;
  width: 32%;
  font-size: 9px;
  font-family: monospace;
  text-align: justify;
}

#suggestL {
  left: 0;
  direction: rtl;
}

#suggestR {
  right: 0;
  direction: ltr;
}

<div id=suggestL>
  <a>STICK</a> <a>HOUSE</a> <a>HANDS</a> <a>WOMAN</a> <a>WOMEN</a> <a>BUNNY</a> <a>BLOND</a> <a>SHAPE</a> <a>SWEAT</a> <a>TREND</a> <a>PHONE</a> <a>MARKS</a> <a>SKULL</a> <a>ANGER</a> <a>TEARS</a> <a>QUILT</a> <a>TRAIN</a> <a>ENTRY</a> <a>QUICK</a> <a>CAPUT</a>  <a>HORSE</a> <a>SUPER</a> <a>SHAFT</a> <a>DOING</a> <a>LOTUS</a> <a>RETURN</a> <a>LETTER</a> <a>SQUARE</a> <a>SYSTEM</a> <a>DOUBLE</a> <a>MIDDLE</a> <a>TURNED</a> <a>SCRIPT</a> <a>BARRED</a> <a>LAMBDA</a> <a>DENTAL</a> <a>OGONEK</a> <a>STROKE</a> <a>CLOSED</a>  <a>VOICED</a> <a>RHOTIC</a> <a>RAISED</a> <a>ACCENT</a> <a>BRIDGE</a> <a>MACRON</a> <a>EQUALS</a> <a>ALMOST</a> <a>ZIGZAG</a> <a>LUNATE</a> <a>DOTTED</a> <a>CURLED</a> <a>TAILED</a> <a>LITTLE</a> <a>GERESH</a> <a>QARNEY</a> <a>MERKHA</a> <a>MASORA</a>  <a>DAGESH</a> <a>QAMATS</a> <a>NUMBER</a> <a>FOURTH</a> <a>POETIC</a> <a>ALAYHE</a> <a>TRIPLE</a> <a>MADDAH</a> <a>HAMZAH</a>
  <a>DDAHAL</a> <a>GHUNNA</a> <a>UIGHUR</a> <a>KAZAKH</a> <a>SHADDA</a> <a>RASOUL</a> <a>SESAME</a> <a>DOLLAR</a> <a>FATHAH</a> <a>DAMMAH</a> <a>KASRAH</a> <a>VESSEL</a> <a>NINETY</a> <a>WEIGHT</a> <a>LIQUID</a> <a>NAXIAN</a> <a>THIRDS</a> <a>TALENT</a>  <a>OUNKIA</a> <a>XESTES</a> <a>ARTABE</a> <a>AROURA</a> <a>GRAMMA</a> <a>PLUMED</a> <a>PERMIC</a> <a>WITHIN</a> <a>TURKIC</a> <a>ORKHON</a> <a>SANDHI</a> <a>KISIM5</a> <a>KASKAL</a> <a>NINDA2</a> <a>ILIMMU</a> <a>SIXTHS</a> <a>BAHAR2</a> <a>KUSHU2</a>  <a>SHINDA</a> <a>NGGUOQ</a> <a>TXHEEJ</a> <a>INSIDE</a> <a>PERNIN</a> <a>FORMAT</a> <a>VAREIA</a> <a>OLIGON</a> <a>GORGON</a> <a>OXEIAI</a> <a>PIASMA</a> <a>FTHORA</a> <a>KATAVA</a> <a>MIKRON</a> <a>ETERON</a> <a>SEISMA</a> <a>KLASMA</a> <a>LEIMMA</a>  <a>PROTOS</a> <a>TRITOS</a> <a>ISAKIA</a> <a>TELOUS</a> <a>CHROMA</a> <a>FHTORA</a> <a>YFESIS</a> <a>DIESIS</a> <a>GENIKI</a> <a>ARSEOS</a> <a>BREATH</a> <a>OTTAVA</a> <a>COMMON</a> <a>DEGREE</a> <a>MINIMA</a> <a>BREVIS</a> <a>TEMPUS</a> <a>KIEVAN</a>
  <a>QUARTERS</a> <a>QUADRANT</a> <a>FROWNING</a> <a>DRAUGHTS</a> <a>CROSSING</a> <a>LOCATION</a> <a>OUTLINED</a> <a>PINWHEEL</a> <a>PETALLED</a> <a>SHADOWED</a>
  <a>S-SHAPED</a> <a>DIRECTLY</a> <a>OPERATOR</a> <a>INTEGRAL</a> <a>INTERIOR</a> <a>NEGATION</a> <a>U-SHAPED</a> <a>CIRCLING</a> <a>POSITION</a> <a>LATINATE</a> <a>TAILLESS</a> <a>AKHMIMIC</a> <a>L-SHAPED</a> <a>SPIRITUS</a> <a>BOHAIRIC</a> <a>INDIRECT</a>  <a>OMISSION</a> <a>SURROUND</a> <a>STANDARD</a> <a>ENTERING</a>
  <a>POMMEE</a> <a>THUMBS</a> <a>FLOPPY</a> <a>BUTTON</a> <a>SPEECH</a> <a>CRYING</a> <a>BOWING</a> <a>PERSON</a> <a>FOLDED</a> <a>BULLET</a> <a>POLICE</a> <a>LITTER</a> <a>CROCUS</a> <a>COPPER</a> <a>SHADED</a> <a>FORMEE</a> <a>COWBOY</a>
</div>

<div id=suggestR>
  <a>HAMZAT</a> <a>BARREE</a> <a>CENTRE</a> <a>FILLED</a> <a>SINDHI</a> <a>SKEWED</a> <a>DALATH</a> <a>PTHAHA</a> <a>ZQAPHA</a> <a>ARABIC</a> <a>RISING</a> <a>SYMBOL</a> <a>CANDRA</a> <a>STRESS</a> <a>KHANDA</a> <a>LENGTH</a> <a>CIRCLE</a> <a>CREDIT</a>  <a>POWERS</a> <a>CHILLU</a> <a>SINGLE</a> <a>SPUNGS</a> <a>-KHYUD</a> <a>RNYING</a> <a>SVASTI</a> <a>MEDIAL</a> <a>KHAMTI</a> <a>LABIAL</a> <a>Y-CREE</a> <a>BOTTOM</a> <a>SAYISI</a> <a>R-CREE</a> <a>N-CREE</a> <a>HAGLAZ</a> <a>NAUDIZ</a> <a>PERTHO</a>  <a>PEORTH</a> <a>SOWILO</a> <a>MANNAZ</a> <a>LAUKAZ</a> <a>ARLAUG</a> <a>FRANKS</a> <a>CASKET</a> <a>SAMYOK</a> <a>CAMNUC</a> <a>PHNAEK</a> <a>MANCHU</a> <a>BEAVER</a> <a>WIGGLY</a> <a>STRONG</a> <a>TALING</a> <a>ASYURA</a> <a>KEMPUL</a> <a>KEMPLI</a>  <a>PAKPAK</a> <a>THYOOM</a> <a>TSHOOK</a> <a>NARROW</a> <a>UDATTA</a> <a>RTHANG</a> <a>KAVYKA</a> <a>SHEQEL</a> <a>UPWARD</a> <a>ITALIC</a> <a>HEADED</a> <a>CORNER</a> <a>PAIRED</a> <a>DASHED</a> <a>SUBSET</a> <a>NORMAL</a> <a>FACTOR</a> <a>SQUISH</a>  <a>H-TYPE</a> <a>L-TYPE</a> <a>SCREEN</a> <a>SHORTS</a> <a>MEDIUM</a> <a>ON-OFF</a> <a>DEVICE</a> <a>RECORD</a> <a>DELETE</a> <a>BRANCH</a> <a>AMOUNT</a> <a>ELEVEN</a> <a>TWELVE</a> <a>TWENTY</a> <a>EIGHTH</a> <a>FLORAL</a> <a>SYRIAC</a> <a>TYPE-1</a>  <a>TYPE-2</a> <a>TYPE-3</a> <a>TYPE-4</a> <a>TYPE-5</a> <a>TYPE-6</a> <a>TYPE-7</a> <a>LESSER</a> <a>FEMALE</a> <a>BEHIND</a> <a>SAFETY</a> <a>BALLOT</a> <a>CENTER</a> <a>SPOKED</a> <a>CURVED</a> <a>GAPPED</a> <a>BESIDE</a> <a>ENDING</a> <a>JOINED</a>  <a>SERIFS</a> <a>AROUND</a> <a>SCHEMA</a> <a>DOMAIN</a> <a>NESTED</a> <a>MEMBER</a> <a>DIVIDE</a> <a>BINARY</a> <a>HOOKED</a> <a>ARROWS</a> <a>COPTIC</a> <a>NUBIAN</a> <a>DIRECT</a> <a>BERBER</a> <a>TUAREG</a> <a>FORKED</a> <a>SECOND</a> <a>SPIRIT</a>  <a>TANNED</a> <a>HIDING</a> <a>REPEAT</a> <a>POSTAL</a> <a>GIYEOG</a> <a>YEOLIN</a> <a>GYEONG</a> <a>HEAVEN</a> <a>HANGUL</a> <a>KIYEOK</a> <a>TIKEUT</a> <a>KOREAN</a> <a>THIRTY</a> <a>EIGHTY</a> <a>BITING</a> <a>COMING</a> <a>GENTLE</a> <a>JOYOUS</a>  <a>BEFORE</a> <a>BROKEN</a> <a>POETRY</a> <a>OPEN-O</a> <a>SAMEKH</a> <a>TTEHEH</a> <a>HINGED</a> <a>SPREAD</a> <a>CUPPED</a> <a>ANGLED</a> <a>RIPPLE</a> <a>OTHERS</a> <a>STRIKE</a> <a>FINGER</a> <a>SPIRAL</a> <a>DREAMY</a> <a>CHEEKS</a> <a>TONGUE</a>  <a>LOOPED</a> <a>KNIGHT</a> <a>BOTTLE</a> <a>HOCKEY</a> <a>TENNIS</a> <a>PADDLE</a> <a>CAPPED</a> <a>TELLER</a> <a>POINTS</a> <a>FACING</a> <a>MOBILE</a> <a>ORANGE</a>
  <a>CLINGING</a> <a>AROUSING</a> <a>MARRYING</a> <a>SQUIRREL</a> <a>QUANTITY</a> <a>LOGOGRAM</a> <a>BASELINE</a> <a>DAMMATAN</a> <a>KASRATAN</a>
</div>

Показать слова красиво без пробела с помощью CSS

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Показать слова красиво без пробела с помощью CSS

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы