Word-wrap is not working - html

I want to display 50 characters on a cell. The problem is the width of the cell is 50px, How can i display the string in two lines(the string is without space) on that cell.

Apart from the impossibility of the task as presented (see Mr Lister’s comment), you can specify allowed line break points with the <wbr> tag.

Related

How to make ClosedXML to not break words?

I am constructing an Excel document using ClosedXML.
I fill the cells with text. When the text is long, it breaks it into several lines in the middle of the word.
How can I make it break into lines only between the words, only on the white spaces?
For example: The word Establishment is broken into 2 and the column width is not changed. I don't want it to break words in two but only in between words and if necessary to increase column width.
Try this code (c#):
ws.Cells().Style.Alignment.SetWrapText(true);
where ws is the worksheet.

SSRS: prevent word break on plus and minus signs

I've got textbox in SSRS report. Textbox consists of 2 placeholders. Second one is long enough for line to be split several times. I want text to be wrapped on spaces, but it's wrapped on plus and minus signs instead. I need "a-b+" and "Ss-+" to be kept together.
Text is fetched from database, I have full control but can't predict exact length or particular order.
My guess is that engineers who've implemented wrapping thought of plus and minus signs as a part of math formula. That's wrong in my case.
So far I've tried to add HTML tags: makes each block occupy whole line and makes no effect. I need something like display: inline-block
I've tried creating several placeholders for each non-breaking value - no effect.
If I replace plus and minus signs with letters, placeholder wraps text just fine:
One obvious solution would be to calculate required character length to add manual line breaks (vbcrlf). But it can't be done easily since it's not a monospaced font.
Is it possible to prevent word wrapping on plus and minus signs?

How to force browser to break text where possible?

I need to determine minimum width adequate for displaying a possibly wrapped dynamic HTML string. Without word-wrapping this is simple: create a span, set its innerHTML and read offsetWidth. However, I'm not sure how to force linebreaks... Easiest incomplete approach I see is to replace all spaces by <br/>, but lines can be wrapped not only on spaces but also e.g. on hyphens.
So, basically, I want a browser to lay out sth. like
Max.
word-
wrapped
string
<----->
somewhere off-screen to measure width of the longest contained word. Is there a generic way to do that?
EDIT
I.e., for no line wraps:
function computeWidth (str) { // code to make it off-screen and caching omitted
var span = document.createElement ('span');
document.body.appendChild (span);
span.innerHTML = str;
return span.offsetWidth;
}
How would I write a similar function which forces line breaks on str, presumably playing with span.style?
You can use CSS work-break / word-wrap and programmatically inserted soft-hyphens (­, but I'd advise you to read up on cross browser problems regarding soft hyphens, as there are quite a few - I normally us the unicode for a soft hypen (U+00AD), but your mileage may vary), and then determine the width with javascript using the range object and measuring cursor offset from the left.
I'm suggesting the use of soft-hyphens, because even the same browser will normally break words differently depending on the OS / which dictionary (on OSX) is used. If that's not an issue for you, you can do it without soft hyphens.
Afaik there is no generic way to get what you want in html/js (it's different if you were using something like flash).
Range object:
https://developer.mozilla.org/en-US/docs/Web/API/range
A different approach would be using the canvas object, but you would probably not get exact results there, as there is just too much factors influencing text rendering in browsers nowadays (font, size, kerning, tracking, ...)
Again another approach would be using <pre> tags / whitespace: pre-wrap, setting the font to what you normally use, and then either emulate breaking words by inserting linebreaks or copying them from still another span/div/whatever set up with word wrap - I haven't tested this yet, but if it works, it might be easer than iterating with the range object.
Edit: Just so it's not only in the comments, still another solution:
Start your container with width 1px, then increase the width, checking the height every time ; when the height decreases, go back one step, and you got your width. Simplest implementation would use 1px increase/1px decrease, but you could of course optimize it to using something like a binary search algorithm, e.g. starting with 1px, then 2px, then 4px increases, then the same backwards, and forwards again and so on till you have a result at a 1px step. But that's only if the 1px inc/dec sollution is too slow ;)
Use the CSS word-break rule:
The word-break CSS property is used to specify how (or if) to break lines within words.
Normal
Use the default line break rule.
break-all
Word breaks may be inserted between any character for non-CJK (Chinese/Japanese/Korean) text.
keep-all
Don't allow word breaks for CJK text. Non-CJK text behavior is same as normal.
<p style="word-break:break-all;">
Max.word-wrapped string<----->
</p>
(source)
Try to play with the word-break Property.
More here: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-break
You should try:
word-break: break-all;
Add it to the CSS like in this fiddle, or read here.

word-wrap attribute is not supported in Sharepoint 2010

I am having issues wrapping some words in the item list.
I have converted item list into XSLT page. Tried setting column width to some value but it gets overridden and stretched out as cells contain some long words without spaces. I tried adding word-wrap: break-word; as inline styling, but it is instantly marked red with message:
This property is marked invalid because it's not supported by the
current schema.
If I save the page anyways it works how it's supposed to work, but if I navigate somewhere else from current list, everything resets and I am back to square one.
How do I fix this? Is there some global CSS which would enable the use of word-wrap? In essence, I want word wrapping in cells of standard view. Even of long space-less words.

Text overlap div

I have a comment box, if they enter long one word, "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
the box will break(text out of div), i have used overflow:hidden but my friend want it to break like normal text.
Any idea how to fix ?
In order for overflow to hide content that is larger than it's containers' dimensions, the container must have a set width. But even so, CSS doesn't break long words. (Except for IE, which has the word-wrap: break-word instruction. Further reading.)
If you're using some sort of server side processing (I assume you are), you could manipulate text content by breaking up long words at a preset length and thus avoid overflowing.
You need to use whatever server language you have to devise some way to break the string up. You could use a combination of regex (to check for long unbroken strings) and then combine it with some string split function in order to insert some newlines or something.