LineBreak with HTML Tag - javascript

How can I split a string at its line breaks.
The Code below works fine. But I am looking for different solution without using "dangerouslySetInnerHTML".
Maybe someone knows.
<div> <div dangerouslySetInnerHTML={{__html: String.split("\n").join("<br />")}} </div>

You can use CSS to use white-space: pre;, which will respect the line breaks in the text, within the targetted element.
.respect-line-breaks {
border: 1px solid #444;
white-space: pre;
}
<div class="respect-line-breaks">This
is
spread
over
multiple
lines
</div>
Is an example.
You can also use the HTML <pre> tag, instead of a <div> if you'd prefer, which negates the need for the CSS. <pre> is also supported in much older browsers too, if that's something you need.
One thing to be aware of though is that if later on when developing your application, you loop through all of your <div> elements, it won't pick up the <pre> elements, which is why I would personally use the CSS solution, if at all possible.
This also means that you can use something like a <p> tag, instead of a <div>, and keep all your normal text styling, etc., in place.

Related

HTML Conteneditable - join paragraphs without inline styles being applied

In a WYSIWYG editor (based on a contenteditable div), I have code to make sure that no inline styles are inserted into the HTML while copy-pasting, normal typing, etc. But now browsers seem to want to screw with me even more. Say I have 2 paragraphs of this sort in my HTML
<p>This is the first paragraph |(cursor)</p>
<p>This is the second paragraph</p>
There are no inline styles present. But if I now join the two paragraphs by pressing "Delete/Backspace", Chrome decides to do this
<p>This is the first paragraph |(cursor)
<!-- Note the horrible inline styles -->
<span style="font-size: 13px; line-height: 19.53px;">
This is the second paragraph
</span>
</p>
Does anyone have any idea as to how I might prevent/detect when this happens?
This is a Webkit's issue. It also influences CKEditor (http://dev.ckeditor.com/ticket/9998). I reported these tickets:
http://code.google.com/p/chromium/issues/detail?id=226941
https://bugs.webkit.org/show_bug.cgi?id=114791
But there was no response.
You could not replicate this on jsfiddle because styles need to be applied to those paragraphs. E.g.:
p { line-height: 1.5em; font-size: 12px; }
Check this one: http://jsfiddle.net/HHHak/2/
So currently there are two possible solutions:
avoid any styling :| (but that won't solve other issues I described in mentioned bug reports),
implement your own backspace/delete support (really tricky... you can find an algorithm in a spec draft, but I'm not certain that it is complete).

how do i align the span tags in div tag in a well designed way?

Well Im stucked at this point.please take a look at this http://jsfiddle.net/karthik64/5jhgF/3/
Okay first enter some input into the input box and hit enter you would see a span element added to the div and try to input some more values and
I guess you got what the problem is.Could anyone tell me how do i fit those <span> tags in <div> tag in a nice manner.
I have set my div tag width and using javscript I add some elements to div tag and I get some kind of wierd bugs something like for example . if user enters dennis ritchie , steve jobs and bill gates my code works likes this
..dennis ritchie.. ..steve jobs.. ..bil
l gates..
Instead it should be like this
..dennis ritchie.. ..steve jobs..
..bill gates..
if it cannot fit the span tag in that remaining space, I want the whole span tag element jump to next line instead of breaking the span tag value how do i do that .please help me with this.any help is greatly appreciated.Thanks
<span>s are not block-level elements and are not rendered like you describe by default (they wrap with text). Apply the CSS display: inline-block; to your spans to stop them from wrapping.
On newer browsers, add display: inline-block; to the .music_elements style rule.
On older browsers, float: left; might work.

Justification of text in HTML

Is there way to force the justification of text using CSS to one line? For example:
I want to justify this text
like this
ButIdon'tmindifitsquashesit
I don't need people to tell me that it's a bad idea to justify text in web pages (I have a manual line spacing and hyphenation algorithm to assist), but I'm just wondering if there's a solution, CSS or JavaScript, to handle this.
Sorry, wasn't very clear with my question: Each line is in a separate div element, e.g.:
<div>I want to justify this text</div>
<div>like this</div>
<div>But I don't mind if it squashes it</div>
I know about text-align: justify but it doesn't solve my problem — it justifies according to how the browser wants to, not by the each line I have. This may result in inappropriate line breaking or falling short of the right edge.
You cannot justify single lines of text.
However, you can hack together something that may work for you.
div{width:300px;
border:1px solid red;
text-align:justify; text-justify: newspaper;
}
div:after{
content: " ";
line-height: 0;
visibility: hidden;
}
http://jsfiddle.net/jasongennaro/zX9x5/1/
This only works if you are okay with an extra blank line under the content.
borders just for example to see spacing, etc.
H/T to #thirtydot for the idea: Justify the last line of a div?
You might try
text-align: justify;
in your CSS :-)

JS/CSS/XHTML: Don't copy specific text during copy events

I'm looking for a way to disable the copying of a specific area of text when you use Ctrl + C, etc. Whether I have to write the text a different way or not.
http://gyazo.com/721a0a5b5af173beb1ad3305633beafb.png
Above is what this is for. It's a syntax highlighter I have been working on (3 languages supported so far). When the user selects ANY text in any way, I don't want the line numbers to be copied.
I can't think of a way to display line numbers, without them actually being there.
As long as the line numbers and the source code are mixed together, this is going to be tough to prevent programmatically, if not impossible.
The ideal way would be having the source code in an actual container of its own.
Open a document inspector and look at how Github do it, for example: https://github.com/jbrisbin/riak-exchange/blob/master/Makefile
they have a separate <pre> element containing the line numbers, and a <table> cell containing the code. (I assume selecting is a reason why they use tables here, but I do not know for sure.)
Give this a try...
Demo: http://jsfiddle.net/wdm954/UD8Dq/7
I layered the div so the code div is on top and the numbers are behind. When you copy and paste you should just get the code.
.lines {
position: absolute;
width: 80%;
color: #666;
}
.lines pre:nth-child(odd) {
background-color: #EEE;
}
.code {
position: absolute;
z-index: 2;
padding-left: 5%;
width: 80%;
}
<div class="box">
<div class="lines">
<pre>1</pre>
<pre>2</pre>
<pre>3</pre>
<pre>4</pre>
</div>
<div class="code">
<pre>
code
code
code
code
</pre>
</div>
</div>
Setting user-select, -moz-user-select, and -webkit-user-select to none might work. For IE, you will need to handle onselectstart and return false.
This will prevent people from selecting the text, but I don't know what happens when it's beside other text that you attempt to copy.
I know that this question is three years old, but with HTML5 you can store line numbers in a data attributes and use CSS2 to display the text. This should prevent line numbers from being copied.
HTML
<span data-line-number='1' class='line'></span>
CSS
.line:before {
content: attr(data-line-number);
}

Break long text

I have a div which has width of say 200px. It does not show horizontal scroll bar. Now if anyone types any word more than 200px worth, it is simply hidden. I am wondering if its possible to automatically put a newline tag after every word reaches 200px length?
Thank you for your time.
You can achive this using simple CSS using
WORD-BREAK: break-ALL.
<div style="width: 200px; word-break: break-all">Content goes here</div>
Hope this is what you were looking for...
It's a tricky problem, but you should probably read http://www.quirksmode.org/oddsandends/wbr.html.
basically, there is somewhat inconsistent support and the linked article proposes use of:
wbr:after { content: "\00200B" }
in your css, and using the <wbr/> tag in your html
There is a soft-hyphen that lets you define where a word can be broken up (For example, prod-uct-iv-ity) which doesn't display any hyphens, just defines where they could show up if the word has to wrap lines. It is entity ­
If you have mono-spaced font, it'd be easy to count number of characters, and just insert a break-tag. But it's harder to calculate where to put in the break-tag with normal fonts.
For IE, you can set word-break: break-all; which will break words when they reach a certain length...
word-break is good, but it is said not to work in firefox. (haven't tested.)
For firefox, use javascript.
It does work in webkit though.

Categories

Resources