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/
Related
I am setting up a simple blog website and need help formatting the posts that are submitted to the front page of the site.
You can achieve this in multiple ways. Maybe the easiest way is to put your text in a container and give this a width. The text will wrap itself.
<div class="text">Your text here</div>
and your CSS. If you want to break within the word you can use word-wrap:break-word;.
.text {
width: 100px;
}
You have many options for this. simple one put you text in a <div> tag and give width to div as much you like.
<div style="width:100px">"Hello, this is my first post. As you can see, it wraps all the way around the text box and into another line."</div>
You should add a word-wrap css property and set it to break-word. This forces the text to wrap inside a container.
.container {
word-wrap: break-word;
}
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 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...
hi all I am new to use css styles,
when i use the below code the complete word is splitting into two words and is moving to next line , I am not getting the complete text in a well paragraphed styles.
<div style="float:left; display:block; word-wrap:break-word; width: 250px">
<asp:Label ID="bodyLabel" runat="server" Text=""></asp:Label>
</div>
here i am binding the mail message to label at run time.
How to get the text wrap automatically when content applied to it without splitting the word.
can anyone suggest how to implement this?
thanks in advance
i think you need to remove word-wrap:break-word from your style. That is breaking your words.
Edit to make your text wrap you can set the width of the paragraph or the containing div to a specific size
example:
width: 400px
UPDATE:
<div class="text">
<asp:Label ID="bodyLabel" runat="server" Text=""></asp:Label>
</div>
CSS:
div.text {
float:left; width: 250px; white-space: normal;
}
i am not sure how asp renders i am assuming it becomes a tag
div.text label {
display:block; width: 100%;
}
Sounds like you want the white-space property, like:
.myTextClass {
white-space: normal;
}
Update: And judging from the code you just posted, you also probably want to get rid of that word-wrap style.
CSS2 has a number of properties that define how a paragraph of text is laid out:
white-space Specifies how white-space inside an element is handled
word-spacing Increases or decreases the space between words in a text
line-height Sets the line height
text-align Specifies the horizontal alignment of text
text-indent Specifies the indentation of the first line in a text-block
It's actually default behavior for text to wrap and be split on whole words. To ensure it does you can set white-space:nowrap, but I'm not sure you need to do that in your case.
The behavior you're describing is most likely caused by the word-wrap:break-word property you have in your code. The word-wrap property was invented by Microsoft and added to CSS3. It allows long words to be able to be broken and wrap onto the next line.
You have defined that long words can simply be broken in half when they don't fit. Removing this rule from the style attribute will give you back the default behavior. If not you can change the rule to word-wrap:normal to be sure.
I came across an interesting problem today. I have a text email I'm sending from a Web page. I'm displaying a preview and wanted to put the preview in a fixed font retaining the white space since that's the way the plain text email will appear.
Basically I want something that'll act like Notepad: the newlines will signal a newline but the text will otherwise wrap to fit inside it's container.
Unfortunately this is proving difficult unless I'm missing something really obvious. I've tried:
CSS white-space: pre. This retains white space but doesn't wrap lines of text so they go out the borders on long lines;
Styling a textarea element to be read only with no border so it basically apepars like a div. The problem here is that IE doesn't like 100% heights on textareas in strict mode. Bizarrely it's OK with them in quirks mode but that's not an option for me.
CSS white-space: prewrap. This is CSS 2.1 so probably not widely supported (I'm happy if it's supported in IE7 and FF3 though; I don't care about IE6 for this as its an admin function and no one will be running IE6 that will use this page).
Any other suggestions? Can this really be that hard?
edit: can't comment so more info. Yes at the moment I am using font Courier New (i.e. fixed width) and using a regex on the server side to replace the newlines with <br> tags but now I need to edit the content and it just strikes me as awkward that you need to strip out and add the <br>s to make it work.
is there no better way?
Try
selector {
word-wrap: break-word; /* IE>=5.5 */
white-space: pre; /* IE>=6 */
white-space: -moz-pre-wrap; /* For Fx<=2 */
white-space: pre-wrap; /* Fx>3, Opera>8, Safari>3*/
}
Just replace all your hard line breaks with <br/> and put the text into a div with the desired width. You can do the same with spaces: Replace them with .
Be sure you do this after you escape the special characters into HTML, otherwise the are not interpreted but printed on the page.
Try replacing any double spaces with - which should work to make your look of double spaces come through.
Crack all those new line and hard enters out with <br />.
Style the text output to make it look like a fixed-width with the font-family:
font-family:monospace;
You may need to size it up properly, something smaller than the surrounding text, but that will give you the look of a PRE, and what a plain text email will look like.
Put it all in a DIV with a fixed with and that could be worth a look.
create a <pre></pre> tag or use something like
<p style="width:800px">
....
</p>
with fixed width, i think text are wrapped