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.
Related
I am trying to left-align all lines of text string within a table in netsuite, but the text does not always have the same width, i.e. is not always more than 1 line.
The demo template seems to work okay;
demo
However, when it comes to printing a sales order, the text string that spans multiple lines, ends up adding white space to the all but the final line of text. Similar to justify style, even though this is never mentioned in the template.
actual
Add this CSS to your templates to fix this issue:
td p {
text-align: left;
}
Credit
In default, no matter how many lines users entered in a textarea, they will combine. How to get the line break entered by users in text area?
If a user enters:
Hello,
How are you?
I am fine.
I expect to get alignment like this, but what i got is:
Hello, How are you? I am fine.
Please help.
HTML doesn't render line breaks except if you use white-space:pre-wrap to the element that holds the content:
.content {
white-space: pre-wrap;
}
<div class="content">Hello,
How are you?
I am fine.
</div>
But I suppose that you should change line-brakes to br before you save your content in the database or before you insert it in the html. Of course, if you add br to the content and want to insert it again in a textarea you should remove it first.
The easiest way to describe my problem is by example: http://jsfiddle.net/trSwG/1/
The first paragraph is great, it's displayed exactly how I want it to. No matter how much white-space is added to the first line, it's truncated and isn't wrapped to the second line.
The second paragraph is where the problem lies. The space preceding the word "case" should not be included on this line, I want it to stay on the line above and act like how it does in the first paragraph.
The third paragraph is also fine, this is just to show that I want white-space to be preserved. It's also worth noting I don't want words broken (word-break: break-all).
I've attached a screenshot below, just in case it's rendering differently on your browsers. I'm using Chrome 28.0.1500.72 m:
You'll notice I'm using the lettering.js plugin to wrap every character inside a span, this is required for a feature we're developing.
What I've learnt so far:
It seems the spans are causing the problem, if you remove lettering call:
//$('p').lettering();
it all works as I need it. Somehow the spans are acting differently than normal text.
Update: The html itself cannot be manually edited either. It's created by a Flash content management tool and saved together with other properties as XML. There are thousands of these xml documents. The server has a chance to process the XML before it's sent as HTML to the front end, so any solution involving changing the html would need to be scripted.
EDIT
What about simply in CSS:
p {
width: 160px;
white-space: pre-line;
font-family: Arial;
font-size: 13px;
}
p:last-child {
white-space: pre-wrap;
}
Turned out to be a Chrome bug in version 28: https://code.google.com/p/chromium/issues/detail?id=246127
It's fixed in the currently beta version 29, only a matter of time before it gets pushed to the public build.
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...