long String in a paragraph without break the full characters - javascript

Is that possible to make a long string like below come in next line(in a paragraph) and not breaking the characters in a long/short string? If long string comes, then the full string need to go next line. (Not half words in first line, and remaining half in next line.)
currently it is showing like this,
My sample text ha
s errors as it is displaying a long strings in next l
ine with breaking the word.
I need like this,
My sample text has no errors as it is displaying a
long strings in next line with breaking the word.
Kindly give me any example in jsfiddle or any thing.
Thanks in advance!

try this
word-break: keep-all;
instead of
word-break: break-all;

Related

Best way to detect "orphan words" in wrapped text

I have a request from our content & design teams to not let paragraphs of text end with an "orphan word" - a single word on the last line of text that has wrapped to multiple lines. The designer's solution is to cheat the margins to, say, +/- 5% to see if we can get the word to move to the previous line or get a word to join it on the last line. That is easy to do by hand but of course we need it to work in code so that it works with different sizes, languages, etc.
What is the best way to detect how many words are in the last line of a wrapped text block? I assume this would involve breaking the string into words, each in their own span or something...?
Thanks in advance!
Clearly I was overthinking this. Someone mentioned that for the use case above, it is sufficient to just replace the space between the final two words with a non-breaking space. (&nbsp). Duh!!
example in action:
<div>This div will not have orphaned&nbsptext</div>

How to get count of characters before paragraph wraps into next line?

I'm trying to count how many characters are displayed in the first line of a text which is wrapped because the width of the span is limited.
I know that counting the characters of a String can be done with "length", but I'm failing to get the first line.
Example:
#divone {
width: 80px;
overflow: hidden;
}
<div id="divone">
<p id="one">Some long text
<p>
</div>
Displayed the text appears as first line: "some long" and second line "text"
Expected output from JavaScript:
Some long
Pseudocode I thought to solve it:
Detect which is the last word before the text is wrapped
Look this word up in original text and retrieve a substring
Use length() to count characters of the substring.
Thanks to comments I found I solution which is approx. what I want:
How to count number of characters in a line using JavaScript

Why textAlign: 'justify' increases letter spacing in some rows

I'm using react-native for creating mobile app and I want to make the text justified within the element.
It works well in most places, but I noticed that in some rows it increasing not only space between words, but between letters as well.
And it looks strange.
Something like this:
Lorem Ipsum is simply -> in most rows (like I want)
L o r e m I p s u m i s s i m p l y -> in some rows
Who knows why it happens?
From the specification:
If [text-align] has the value 'justify', the user agent may stretch spaces and words in inline boxes (but not inline-table and inline-block boxes) as well.
(my emphasis)
So not just spaces between words, but words themselves can be stretched to fill the space. The algorithm the browser uses to decide where to add the padding (between words, within words, or a combination) is browser-specific.
Justify means: fillup from left to right, it'll space out the wording / letters in a line until it feels up...
Because that's what "justify" means in typesetting. It means both the left and right side of every line are aligned. The only way to reliably do that without splitting words is to mess with the letter kerning. This is frequently used in column based layouts like a newspaper.

Display huge text (partly colored)

I am curently working on one visualization, using JavaScript, which should deal with large amount of text.
In each sentence there are at least couple of words which I need to color, which means that a single sentence would look something like that:
"Word word word coloredWord word word coloredWord coloredWord word...".
Currently for each part without coloredWord I am creating a span element and appending a text node to it. And also each coloredWord is put in one span (I am using spans to be able to set classNames).
However it takes too long to display it.
I have tried to use fragment and also to first set the div.style.display to "none" till all nodes are created. But I could not see any difference.
Is there maybe another way how to display such a text where huge part of it needs to be colored in different colors?
As #monxas mentioned you could use spans inline like so
<p>Test test <span>colored</span> test test </p>
css
span{
color:red;
}

Is there anyway to set the letter-spacing automatic based on the div width?

I have a fluid width website where I planned to place some text inside <div>. The idea is
<div>FIRST LINE TEXT HERE</div>
<div>THE SECOND LINE TEXT HERE. BUT QUITE LENGTHY</div>
<div>THIRD LINE IS HERE. NOT THAT MUCH LENGTH<div>
I need to display all the three lines to look like a justified LETTERS, by adding letter spacing dynamically based upon the content inside and available out <div> width.
You could compute the widths of the texts in JavaScript, then calculate the letter spacing needed, and add it. Note that this would treat word space like any other character, so the more spacing is added, the closer to each other would words appear to be. The results would be typographically questionable in other ways, too: words don’t look good if letters get too spaced.
If just a little spacing would be needed, it’s usually better to add word spacing, and you could do that for some browsers (not Chrome) with text-align-last: justify. You could consider using additionally text-justify: newspaper, as it may put part of the added spacing between letters, not just between words. See jsfiddle.
I would suggest you to try this..give three different classes to the lines ie first_line, second_line and similarly third_line
Then write css for the classes. for first_line u keep the letter-spacing to wat u want. similarly u can give letter spacing for the other two lines as well.

Categories