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.
Related
I often find I wish to control how a sentence breaks/wraps, e.g.:
Hello there Mr Nemesis X, welcome to the interwebs!
If the viewport is narrow, I would like it to wrap after the comma, so the two logical lines are together:
i.e. GOOD: Only if the viewport is too narrow to show the whole screen
Hello there Mr Nemesis X, |<----- viewport width
welcome to the interwebs!
BAD:
Hello there Mr Nemesis X, welcome to the |<----- viewport width
interwebs!
At the moment I place the two sentences in two <span>s, and use flex to ensure they wrap together, what a mission for something I often do. I learnt about <wbr>, which sounds like it could work if I replace all the spaces with say , but its not what it was defined for. Theres <br>, but that always breaks. So I am looking for something like a "line break", say <lbr> (doesnt exist), which if the line needs to wrap, it says hey, heres a good place to break the line.
You maybe can use \n after the coma.
The way your code is breaking right now is accurate to a break. The <wbr> is used to break a long word up hence why you would need to add that HTML entity to break up your lines.
For what I think you want, going for that specific design aesthetic, breaking at a comma, you would need to pre-process your strings before they get written, and as the view-port updates as to add breaks where you deem necessary.
You can use a <br> html tag to break a line!
Inserting the line break tag after the comma.
Or you can use the /n after the comma.
In HTML5, how do you skip 5 spaces in a <div>? For example, how do you do this:
"Drumroll... [5 spaces] Something!"
<div>Drumroll... [5 spaces] Something!</div> just outputs "Drumroll... Something!"
There does not seem to be any tags such as <indent> that I have found to indent in the middle of a sentence.
      works, but is there a more efficient way? Such as...
<skip 10px></skip>
Specifically, I am looking for the solution to insert exactly 1,000 spaces easily, for example.
This is not perfectly five spaces, and I'm not sure if there's a way to do it without using five consecutive s, but this will allow you to add a specifiable amount of space inline.
<p>Drumroll...<span style="margin-left:50px;"></span>something</p>
http://jsfiddle.net/5drHj/1/
Another option might be to use the <pre> tag...
<pre>Drumroll... something</pre>
http://jsfiddle.net/5drHj/2/
If you do decide to use consecutive you could use a javascript loop (or php loop for server side construction) to add the 1000 s
Edit: At the risk of losing my tick, I'd like to point out that the answer given by #vals is a third option, and perhaps the most elegant of the three.
No, there is no such element in HTML. Long ago, there was the nonstandard <spacer> tag, but it was abandoned. You are supposed to use CSS for things like this. Wrap some preceding text in a <span> element and set padding-left: 1.25em on it. Tune the value as needed. The width of a space depends on font but is on the average around 0.25em.
The question that you pose in the first half of the question (How to insert spaces easily), is achieved with the property:
white-space: pre;
It means that your text is pre-formatted, and the white spaces should stay as they are. Then just insert those spaces.
fiddle
If you want to insert 1000 spaces, then we are talking probably about alignment, and there is a huge amount of posibilities. (padding specified in em being the most obvious), but you should then give more details of your situation.
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.
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.
I have a table with column contents that could be potentially long. From a design/usability standpoint, is it better to wrap the text or provide a scroll bar within the column to view the entire text?
Personally, I think wrapping the text is better. But I wanted to know what have others done in such a situation?
I ALWAYS page my content rather than wrapping or scrolling. It's super easy with jQuery DataTables and it gives the user further opportunities to filter, limit, and sort the data.
This solution also gives you the option to scroll data as well, and to dynamically adjust columns or do show/hides. But I've never gotten to that point. One one of my applications, using Ajax and Pipelining (which are supported by the plugin) it handles 3+ million records without a hiccup. Also, note that it can use jQuery's Themeroller, which can style the table simply and even from the user end on the fly if so desired.
I usually let the text wrap into the cell. But, what do you mean by "potentially long"?
I use a calendar plugin and sometimes the title gets long- i made the decision to break the string in the middle if needed- Supported in CSS3 only- other wise it just wraps
My css
.fc-event-title {
text-wrap: unrestricted;
word-wrap: break-word;
}
and will only happen if mywordisexteremlylong and wont fit properly in a small cell
But this is very extreme so that it does not overflow into the next cell.
But otherwise i dont break the word if there is enough space.