Making A Very Long Word Fit In Responsive Element?
I'm using Twitter Bootstrap. JSfiddle
VeryLongWordHere
Solution 1:
I use this CSS in my solution to a similar problem:
word-wrap:break-word
This will force words to break if necessary to force them to fit.
Solution 2:
For your first option, there are a number of jQuery plugins that dynamically resize text to fit the width of the parent element. Here are a few:
You could use any of these plugins to resize the text when the screen size is smaller than a certain breakpoint. Something like this:
if (jQuery(window).width()) < 600) {
jQuery('h1').slabText();
}
Solution 3:
If the requirement is to resize the very long word on small screen sizes (Responsive Screen), min-width could be any minimum width, now if user shrink the screen size then word will break and fit into the screen size.
.wallet__address {
min-width: 50px;
word-break:break-word;
}<html><divclassName="wallet__address"><p>
0x1453Dbb0x1453Dbb0x1453Dbb0x1453Dbb0x1453Dbb
</p></div></html>
Post a Comment for "Making A Very Long Word Fit In Responsive Element?"