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.
Related
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.
It seems that IE starting from IE7 to IE10 wraps text in the textarea control incorrectly when using \n (or \r\n - doesn't matter - results are the same). Is this a bug in IE or they treat the html standard differently than other browsers - who is right? I have defined:
<textarea id="TextArea1" runat="server" style="width: 190px; height: 390px; white-space: normal; word-wrap: normal; overflow: scroll" ></textarea>
When I try to add long string like "VeryLongStringEndingWithNewLine\n" by using JavaScript code (obj.value += text;) the text is shown in one line with scroll (this is ok) but added with an additional empty line (\r\n) - why?
When I try to add short string like "Short\n" multiple times, again via JavaScript code the text is on the same line (should be on the separate lines because normal wrapping should be applied).
Moreover when I do postback then all \r\n's are replaced with spaces (why?) and then text parsed correctly (assuming if I used spaces instead of crlf normal wraping with space only wraps when does not fit in the area).
When using FF or Chrome same control behaves correctly - long lines are shown without an additional empty next line, short lines are on the different lines, no replacement with spaces when doing postback.
I know I could probably use other options or white space characters, but I feel that above is not correct about IE. Any comments?
Under normal circumstances, textareas treat whitespace literally and wrap as needed.
But because you're overriding it with CSS, the result is potentially unstable.
In this case, whitespace (\n) is collapsing to a single space, since that's what white-space:normal does.
I'm not entirely sure what you're trying to achieve here, since I'm fairly sure the default behaviour for textareas is perfectly fine. If you don't want that behaviour, you shouldn't be using a textarea.
I have the following HTML code:
this is just a <i>test sentence</i>
As you can see, I put in "white-space:nowrap" to ensure that the sentence stays on one line no matter the browser window size. However, it seems that italicizing some words in the sentence prevents this from happening. On smaller browser windows, the result is "this is just a" on one line and then "test sentence" on the next line. How do I make it so that the sentence always stay on one line?
Italic does not cause line wrapping. The problem is in some part of a style sheet that was not disclosed in the question (the code posted does not demonstrate the problem). It might be a “killer CSS reset”, which really tends to mess things up. It might be something like * { white-space: normal }, which naturally causes normal line wrapping inside the i element, instead of letting it inherit white-space from its parent.
So you should clean up your use of CSS, preferably getting rid of “CSS resets”. Reset just the properties that really need to be reset.
I've had this problem as well in FF - identical situation.
The quickest fix is to set the font size to be a bit smaller e.g 90%.
I don't have any css resets either.
You could try adding inline-block to the href which works at least in chrome
this here is a very long is just a<span style="font-style: italic"> test sentence</span>
I am creating HTML pages with a base string and annotations on top of the base string's words and letters. Right now I'm using the ruby, rb and rt tags and I tried tables and divs too. It looks like this:
Source:
<body>
<ruby>
<rb>新</rb><rt>しん</rt>
<rb>Brasil</rb><rt>ブラジル</rt>
<rb>1</rb><rt>いち</rt>
etc.
My question is: Is there a way to rewrite the HTML, so the output looks roughly the same, but at the same time allow highlighting only the small characters shown in yellow, without having to select the big letters with them (so that the selection can be copied to the clipboard)?
Right now, and with the simple table cell methods I tried, you are forced to highlight big letters with the small.
The picture makes the association look totally random, but the tricky part is that the markup has to line up centered with the corresponding "big" letters.
<style>
.r { display: inline-block; text-align: center;}
.ra { display: block; font-size: 60%; }
</style>
<a class=r><span class=ra>しん</span>新</a>
<a class=r><span class=ra>ブラジル</span>Brasil</a>
<a class=r><span class=ra>いち</span>1</a>
On browsers that support ruby markup, the ruby annotations looks selectable and copyable to me. But on IE, when an annotation is selected, the distinctive background color used the browser extends down over the base texts as well, so it looks like you had selected both. If you do Ctrl+C and Ctrl+V then, you’ll see that only the annotation is copied. On Chrome, this problem does not exist: only the selected annotation is highlighted.
This could still be seen a problem. There is the perhaps more serious problem that Firefox does not support ruby markup.
The code I suggest above uses text-level markup with classes instead of ruby markup and styling that displays it in a ruby-like manner. I put the annotation before the annotated word, since then it is easy to place the annotation above the base text—without positioning, just by making the container element an inline block and the annotation a block inside it.
The markup is a bit messy, but this approach works widely across browsers. I suppose main problem is with display: inline-block, but it seems that in simple use like this, support exists even in old versions of IE (from IE 5.5).
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