can I make a string inside a textarea to wrap on multiple lines? (to avoid the horizontal scrollbar)
Note that I have a very long string without any spaces (a encoded text), and css word-wrap properties don't seem to work on it...
What you want is default and should work properly unless you specified the wrap=on or wrap=true (not sure which but think the first) attribute! what you need to force it is wrap=hard
you can however specify predetermined breaking points using the character somewhere in the word. it won't be visible, but break there.
you can also have a look a some function like http://php.net/manual/en/function.wordwrap.php
you can also have a look at the following css settings:
overflow: scroll;
overflow-y: scroll;
overflow-x: hidden;
overflow:-moz-scrollbars-vertical;
Related
By default , it there's a long word at the end of a line which cannot fit in the remaining space , it's automatically shifted to a new line.
This property is used in such cases to make break the word letting it take the remaining space as much it can before shifting rest part of the long word to another line.
(At least from what I understood).
I gave this property a try but it doesn't seem to work well for some reason.
div {
overflow-wrap: break-word;
hyphens: auto;
width: 100%;
}
<div>
This is the first time I've seen the word Pneumonoultramicroscopicsilicovolcanoconiosis. It's a long one
</div>
The longer word in my example instead of breaking down just normally shifts to new line ignoring this property.
After a little bit of googling, I found a property which works similarly: word-wrap: break-word;. So I replaced overflow wrap with it. It didn't work so I kept both of them together, but that still didn't worked.
To better understand my question ( if according to you my output is fine ) then please check this
Edit - my issue is fixed but the explanation i had given for this property above is wrong
The old name of this property is word-wrap
And this being a property with new name , i wouldn't anyone to get wrong info through my question
so here's a correct example and explaination of what this property does which i wrote - https://del.dog/qeraracita.coffeescript
The example you are using as your "proper break" from CSS-Tricks (https://css-tricks.com/almanac/properties/o/overflow-wrap/) has a non breaking space between 'Word' and the long word, making it a single word to break up, hence the difference you see between where the word breaks in your code and the example.
<p>This is the first time I've seen the word Pneumonoultramicroscopicsilicovolcanoconiosis. It's a long one.</p>
remove that extra non breaking space and the word break happens how it does in your demo. https://codepen.io/rlemon/pen/MWgxXmK
so to solve your problem, add back in the non breaking space and let it treat those two words as one.
First of all, you're applying these properties to all elements with the.div class, not the div element itself. Remove the dot ('.') on the CSS selector.
If it still doesn't work, use the HTML entitie . Its an hypen that doesn't appear until the word is broken. This is great, so you can tell the browser where it should break (same as <wbr>, but with hypen).
Example:
<div>
This is the first time I've seen the word
ultramicroscopicsilicovolcanoconiosis. It's a long one.
</div>
Hope this helps!
I'm not seeing the unexpected behavior.
Here is a Codepen demonstrating overflow-wrap.
HTML
<div>
<p>This is the first time I've seen the word Pneumonoultramicroscopicsilicovolcanoconiosis. It's a long one</p>
<div>
CSS
div {
max-width: 100px;
border: 1px solid red;
}
p {
overflow-wrap: break-word;
}
I have some data outpu in a HTML table, some rows have expandable data fields and this works ok. Some rows are standard and are fine. The widhts seem to be controlled correctly via the CSS.
The Problem
I have limited the size of the table columns and set Overflow to hidden to prevent the data being pushed of the side of the screen, this works ok for Plain text inside a however if the data inside a is XML (which has been formatted for HTML using replacement chars) with a very long string before a line break, this data pushes of the side of the screen.
See the following JSfiddle for an example of what happens
http://jsfiddle.net/bj0jav2y/
What can i add to the XML to force the text to wrap onto another line similar to "Click to expand) This works as expected. Lorem" line.
Including the code below so i can post. Ignore this its all in the JSFiddle
.outer td:nth-child(4) {
width: 65%;
overflow: hidden;
}
Thanks
Your XML has a bunch of characters in it. stands for "non-breaking space," so it is specifically designed to do the opposite of what you are asking - that is, it will not break even if it is too long for the line. If you replace all the instances of with a plain old space '' character, then your XML will wrap just like the lorum ipsum text.
Tell the browser to do it:
.outer td {
word-break: break-all;
}
Try this:
.content span {word-wrap:break-word;}
Technically your xml is being treated as an unbreaking line.
I set up a webpage like the one detailed here: http://alistapart.com/article/holygrail
(An example can be found here: http://alistapart.com/d/holygrail/example_4.html)
My problem (which may sound contrived and if that bothers you, let's take this as a fun exercise in CSS) is that if you take out all the spaces and any other characters that allow a string to break, the text will overflow or get hidden behind the right column:
The ideal solution is to put an ellipsis whenever that happens so that the user knows that there's text being hidden. (Note that I don't want to force breaking between letters because the rest of the paragraph has normal-sized strings that should break on spaces or punctuation.)
I can't seem to get text-overflow to work anywhere. The best I can do, it seems, is to just apply overflow: hidden but that's a severely less-than-ideal solution.
Can anyone show me (using CSS only, hopefully. I'm not interested in doing text calculations in JavaScript) how I might be able to add an ellipsis for this particular problem?
Try this css
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
I need your help with image display inside comment box. When ever characters of the comments exceeds a certain number instead of it to wrap round the image to the left, it actually gives the appearance in the picture below. How can I fix this?
#comment img.floatright {
float:right;
padding: 1px;
clear:left;
}
IMAGE
I would personally set the text inside a <div> and define a width, but if you don't want to do that you could create a PHP function to insert <wbr> tags whenever there is a long word. The tag will only break up the word when needed so you can implement multiple tags in a word.
Example:
http://jsfiddle.net/6rBUZ/
Another option would be add the following style to the content that you want to wrap:
word-wrap: break-word;
overflow: hidden;
The word-wrap setting will allow the word to be wrapped despite its length. The overflow setting will cause it to be cut off at the end of the available space in browsers which don't recognize word-wrap.
Example: http://jsfiddle.net/Redsz/pBSDd/1/
I have a comment section which is of a certain width. When I post a long URL, this text is overlapping as there is no spaces in between. How to fix this in HTML
As far as I know there's no HTML way to do this. Since it's display/design related you can use CSS:
overflow: hidden;
This might work too:
word-wrap: break-word;
Overflow & Word-wrap links.
Edit: overflow: hidden will hide the text that extends beyond the size of its container and word-wrap: break-word should force a break in the word.
You have a few options. You could amend your comment system server-side so that it automatically puts in a line break if a word is over a certain length.
Or, you could set the CSS style overflow to hidden, scroll, or something like that to prevent the containing DIV of the comment from being stretched - that could do the trick too.
There is no solution in pure HTML. If you can use JavaScript or AJAX, you can convert the URL into a real link and replace the text part with only the first 20-30 characters of the URL: http://some.com/a...