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.
Related
I have a sentence which includes a quote of a multi-line poem. I'm wondering what's the correct way to express it in HTML.
Example
Yesterday the poem
Would it be ok if I took some of your time?
Would it be ok if I wrote you a rhyme?
kept bouncing in my head.
I believe this whole example should live in a <p> tag, since it wouldn't make sense to split "Yesterday the poem" or "kept bouncing in my head." away from the rest: they're not valid independently. The whole example together is one sentence.
For a poem represented this way I would normally use a <blockquote>. However you can't nest a blockquote inside a p, thus I need to change something.
What's the semantically correct way to represent my sentence?
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.
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?
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 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.