Hi,
I added a dropdown search in which few words are not fitting properly and are overflowing. So I added the following css code:
.vscomp-option-text{
white-space: wrap !important;
word-break: break-all;
}
so now its breaking the large words into 2 lines but I want to add a hyphen where it breaks. Can you help what else I need to add to the code?
Hi Gayathri,
Hyphens are used in various languages to break words, but where a hyphen should be placed is very language dependent, and just adding a hyphen at a semi-random location in the word makes for very bad user experience.
Also, do not use !important in CSS, unless you really can't avoid it.
Thanks for the reply
Hi Gayathri Gali,
You can use the hyphens property to add hyphens at the breakpoints of long words :
.vscomp-option-text {
white-space: normal !important;
hyphens: auto;
This will enable hyphenation at appropriate breakpoints for overflowing words in your dropdown search.
Thanks & Regards
Reemali Patil
Does hyphens : auto; work only when there are hyphenation points in the words?
Yes, the `hyphens: auto;` property only adds hyphens to words if hyphenation points are defined in the word. If there are no hyphenation points specified, the property won't add hyphens for word wrapping.
Okay thanks for the response. Is there no other option because it should break and give a hyphen at the end of the line.
once try this:
overflow-wrap: break-word;