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...
Related
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;
So basically this is my problem i have a div that gets its value from a <textarea> just like here on Stack Overflow but if I make it into big characters or small the characters won't break to a new line -- they go outside of the <div>. is there a easy and good way to resolve this?
Use the following CSS on your element:
word-wrap: break-word;
You can use word-wrap.
Example: http://jsfiddle.net/7vDbp/
Usage notes: http://caniuse.com/#search=word-wrap
Alternately, you can insert the <wbr/> tag into your markup at desired word breaks.
Example: http://jsfiddle.net/Wz8jp/
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/
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;
in gmail, they display the
subject - followed by a short snippet from the body
and it looks like the body text is clipped, i am assuming this is done with css, gmail style sheets are fairly complex, so am not certain
anyway only parts of letters are showing at the end of the line where they get chopped off
does anyone know how i can achieve the same effect, so i get full length text in a column
got it sussed thanks #cletus
just to clarify, this is what i ended up with
<div style="overflow: hidden; height: 20px;">mytitle<span style="color: gray; "> - my long description goes here</span></div>
To get the full text-clipping effect, where only parts of letters show at the end of the element, just add:
white-space: nowrap;
It's overflow: hidden CSS on block elements. The block-level element part is important. See The CSS Overflow Property.
This one won't work in IE6-7. Use text-overflow css property instead. More about it: http://www.blakems.com/archives/000077.html (this won't validate! Validator notices, that it's a css3 property which doesn't exists in css2.1...)