Магическото свойство word-break от CSS3

Много предимно back-end програмисти ненавиждат CSS. Може да обичате да пишете JavaScript, но понякога един лайоут може да ви постави в мат. Много важно е да запазите спокоиствие и да не се поддавате на импулса да решавате специфични за кънтента проблеми през back-end или през JavaScript. За почти всички подобни проблеми си има изцяло CSS решение. Миналата седмица този специфичен кънтент проблем, който ще опиша по-долу ми докара нещо като временна ярост. Проблема беше, че по-дългите текстове на линкове разтегляха един контеинер. Подтиснах желанието да мисля някакви врътки откъм back-end-а, например да добавям многоточие ако е по-дълъг текста или да оставям само последната дума. След кратък ресърч хем научих нещо ново хем оправих този интересен от една страна проблем. Свойството word-break, което е част от CSS3 спецификацията контролира как да се пренасят думите в текстовото съдържание на елемента. То има три стойности normal - както е по-подразбиране за текущия език - не можете да разчитате на тази свойност, keep-all - може да се пренасят думите само, когато има whitepaces - много неприятно е поведението при по-дълги линкове или текстове, разделени с тирета, break-all - може да се пренася навсякъде между два символа. Ето поведението преди прилагането на word-break: break-all; на контейнера, съдържащ линка:

Ето коректното и доста по-приятно поведение като резултат от прилагането стойноста break-all на това свойство върху селектора: