How can I force a long string without any blank to be wrapped?
for block elements:
<textarea style="width:100px; word-wrap:break-word;"> ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTC</textarea>
Forcing a long line of text (without spaces) to line break according to parent containers static width using CSS
You can use this to wrap :
.wrap {
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* Opera <7 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE */
}
How to break a long string and make it continue on the next line?
Use something like:
p.test {
word-break: break-all;
}
wordwrap a very long string
This question has been asked here before:
- Who has solved the long-word-breaks-my-div problem? (hint: not stackoverflow)
- word wrap in css / js
- CSS: how can I force a long string (without any blank) to be wrapped in XUL and/or HTML
- CSS overflow with long URL
Long story short:
As far as CSS solutions go you have: overflow: scroll;
to force the element to show scrollbars and overflow:hidden;
to just cut off any extra text. There is text-overflow:ellipsis;
and word-wrap: break-word;
but they are IE only (break-word
is in the CSS3 draft, however, so it will be the solution to this 5 years from now).
Bottom line is that if it is very important for you to stop this from happening with wrapping the text over to the next line the only reasonable solution is to inject
(soft hyphen), <wbr>
(word break tag), or
(zero-width space, same effect as
minus hyphen) in your string server side. If you don't mind Javascript, however, there is the hyphenator which seems to be pretty solid.
How to wrap long lines without spaces in HTML?
I haven't personally used it, but Hyphenator looks promising.
Also see related (possibly duplicate) questions:
- word wrap in css / js
- Who has solved the long-word-breaks-my-div problem? (hint: not stackoverflow)
Wrapping long text without white space inside of a div
You can't wrap that text as it's unbroken without any spaces. You need a JavaScript or server side solution which splits the string after a few characters.
EDIT
You need to add this property in CSS.
word-wrap: break-word;
Can't break a long string/text, it exceeds the width of html div
wirte this in your css word-wrap:break-word;
css:
#id_div_comments p{
word-wrap:break-word;
}
How can I wrap or break long text/word in a fixed width span?
You can use the CSS property word-wrap:break-word;
, which will break words if they are too long for your span width.
span { display:block; width:150px; word-wrap:break-word;}
<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>
Related Topics
Imitating a Blink Tag With Css3 Animations
How to Find Unused Images and CSS Styles in a Website
How to Remove a Div But Keep Its Elements
Are Empty HTML5 Data Attributes Valid
Prevent Scroll-Bar from Adding-Up to the Width of Page on Chrome
Why Are Frames Deprecated in HTML
Link with Target="_Blank" and Rel="Noopener Noreferrer" Still Vulnerable
How to Add Hamburger Menu in Bootstrap
Text-Align Class for Inside a Table
How to Set a Background-Color For the Width of Text, Not the Width of the Entire Element, Using Css
How to Make an Editable Div Look Like a Text Field
How to Prevent Input Type="Number" Getting Negative Values
How to Center Nav-Items in Bootstrap
What Is It When a Link Has a Pound "#" Sign in It
How to Make a Whole 'Div' Clickable in HTML and CSS Without JavaScript
Using Base Tag on a Page That Contains Svg Marker Elements Fails to Render Marker