I'm just simply showing HTML from API in my app, but text is wrapping up in the middle of the word.
Example:
I just want to explain, what problem I'
m facing. Text should only wrap
in a space.
You could use
<nobr>I'm</nobr>
for the words containing the apostrophe.
Attention: The Tag is not standard HTML but supportet by many browsers.
Otherwise you could use use
<div style="white-space: break-spaces;"> just want to explain, what problem I'm facing. Text should only wrap in a space.</div>
That should be supported.
You can find further Information here (about <nobr>) and here (css editing).
Related
A colleague had a text alignment issue on a screen I completed. I was shown the issue on a Win10 PC using Chrome, and some lines of text appeared like this:
Text line 1.
Text line 2 is much longer and wraps to two lines, but the second line
does not have the whitespace added.
Text line 3 does not wrap, and has the same alignment issue.
When I viewed it on my Mac using Chrome, I did not see the issue, so I ingeniously deduced it was most likely a Win-Chrome bug with some bootstrap class, etc.
But, after digging in, the problem ended up being the format of the <p> tag content:
<p>Text line 1.</p>
<p>
Text line 2 is much longer and wraps to two lines, but the second line does not have the whitespace added.
</p>
<p>
Text line 3 does not wrap, and has the whitespace.
</p>
I'm aware that a newline in the middle of a string will infer a space in most browsers (thank god), so that you don't have to add a trailing / leading space when writing multi-line content. However, I've never seen the initial return cause leading whitespace.
The point is that there may be a lot of code formatted this way, and the client will spot the alignment issues, as they test in Win10. Why does this happen, and is it most likely a Win/Chrome bug? Is it a conscious choice by some browser developers?
References would be greatly appreciated, but I personally could not find anything relevant on SO, CSS-Tricks, or Chrome browser documentation.
EDIT:
Another colleague has confirmed that adding a <br /> within the <p> tag (no trailing / leading spaces) also generates a single leading whitespace directly afterwards.
white-space: pre-wrap preserves whitespace, so on word wrap it will not add the extra space since its located at the start of the paragraph.
either try white-space: none; or add some padding/margin if you want the whole paragraph to have that extra space even after word wrapping.
Some languages don't use space. Japanese for example.
A typical paragraph might look like this (taken from the Japanese Wikipedia article on Stack Overflow)
本サービスはコンピュータ・プログラミングの広範囲なトピックを扱っていることが特色である。ウェブサイトは質問と回答を行う機能、またそれらに対する評価付け、wikiやdiggに似た文書の編集機能を備えており、ユーザの活発な参加を促している。Stack Overflowのユーザは良質な回答を行うことによって、評価ポイントや「バッヂ」を得ることができ、本サービスは伝統的なQ&Aサイト・フォーラムにゲーミフィケーションを施したものと言える。全てのユーザによる記述内容はクリエイティブ・コモンズライセンス下にある。
Even though there are 3 sentences in the paragraph above the only space in inside Stack Overflow.
So there's the issue. Japanese users generally don't write long sentences and paragraphs with no breaks. To write the paragraph above most people would not write.
<p>本サービスはコンピュータ・プログラミングの広範囲なトピックを扱っていることが特色である。ウェブサイトは質問と回答を行う機能、またそれらに対する評価付け、wikiやdiggに似た文書の編集機能を備えており、ユーザの活発な参加を促している。Stack Overflowのユーザは良質な回答を行うことによって、評価ポイントや「バッヂ」を得ることができ、本サービスは伝統的なQ&Aサイト・フォーラムにゲーミフィケーションを施したものと言える。全てのユーザによる記述内容はクリエイティブ・コモンズライセンス下にある。</p>
They'd write something more along the lines of
<p>
本サービスはコンピュータ・プログラミングの広範囲なトピックを扱っていることが特色である。
ウェブサイトは質問と回答を行う機能、またそれらに対する評価付け、wikiやdiggに似た文書の
編集機能を備えており、ユーザの活発な参加を促している。Stack Overflowのユーザは
良質な回答を行うことによって、評価ポイントや「バッヂ」を得ることができ、本サービスは
伝統的なQ&Aサイト・フォーラムにゲーミフィケーションを施したものと言える。全てのユーザに
よる記述内容はクリエイティブ・コモンズライセンス下にある。
</p>
Which unfortunately becomes this
With all these unwanted gaps
The only solution I can think of requires JavaScript to go through and remove spaces between Japanese characters and any other character at display time or by adding a build step.
Is there a CSS only solution?
Here's a live sample: The first paragraph is one long hard to edit line. The 2nd paragraph has the line breaks in it
<p>
本サービスはコンピュータ・プログラミングの広範囲なトピックを扱っていることが特色である。ウェブサイトは質問と回答を行う機能、またそれらに対する評価付け、wikiやdiggに似た文書の編集機能を備えており、ユーザの活発な参加を促している。Stack Overflowのユーザは良質な回答を行うことによって、評価ポイントや「バッヂ」を得ることができ、本サービスは伝統的なQ&Aサイト・フォーラムにゲーミフィケーションを施したものと言える。全てのユーザによる記述内容はクリエイティブ・コモンズライセンス下にある。
</p>
<p>
本サービスはコンピュータ・プログラミングの広範囲なトピックを扱っていることが特色である。
ウェブサイトは質問と回答を行う機能、またそれらに対する評価付け、wikiやdiggに似た文書の
編集機能を備えており、ユーザの活発な参加を促している。Stack Overflowのユーザは
良質な回答を行うことによって、評価ポイントや「バッヂ」を得ることができ、本サービスは
伝統的なQ&Aサイト・フォーラムにゲーミフィケーションを施したものと言える。全てのユーザに
よる記述内容はクリエイティブ・コモンズライセンス下にある。
</p>
Here are screenshots to show the difference.
1st paragraph with no breaks in HTML
2nd with
Also note that whatever solution it should not collapse the space in Stack Overflow
Use white-space: pre or white-space: pre-wrap
Reference: https://www.w3schools.com/cssref/pr_text_white-space.asp
JSFiddle : https://jsfiddle.net/kqcvp10w/
Using "Reformat Code" in IntelliJ (and other JetBrains IDEs) on an HTML file will add newlines in text to ensure that text does not go beyond the right margin. What I'm looking for is the ability to have a portion of the text be moved back to the previous line if there is space for it on the previous line.
For example, if I originally have:
<p>
This is some text that is fairly long and won't fit on a single line without going over the right margin.
</p>
Reformatting the code results in something like (assuming a very small right margin):
<p>
This is some text that is fairly long and
won't fit on a single line without going
over the right margin.
</p>
But then if I remove some text:
<p>
This is some text that
won't fit on a single line without going
over the right margin.
</p>
I would like reformatting the code to automatically result in this:
<p>
This is some text that won't fit on a
single line without going over the right
margin.
</p>
I looked through the settings for reformatting code, but did not see how to do this. Possibly one of the "Keep newlines" options, but removing those seemed to remove newlines between tags as well. Is there a way to do this?
Yes, Intellij has code style option called 'Keep line breaks in text' for HTML. Disable that option, and then reformat code.
I want to indent text with several spaces. So I need to put some spaces before the text in order to indent the text. Obviously doesn't work. Is there another symbol that would do that for me. I don't use CSS. Just in a plain html.
Thank you in advance.
This may not be the right way by some peoples standards, but following the OP:
Just in a plain html
&nbps; represents a single space, multiple of them will represent multiple spaces. Html Entities
<pre></pre> also works by telling HTML to allow formatting, preformatted text
Here is a jsfiddle
Use multiple times this combination in your html code:
<p>This will be spaced</p>
I have a website that displays in two languages - english and farsi. The title of a list item can be in both languages mixed at the same time. All ok until here as far as you have text only it will render ok using direction:rtl in css.
But the catch is that I can also have a number inside or at the end of title (which in farsi is written and read same as in english - left to right). This ends up with a problem since no matter where I put that number it will mess up the words order in the title (the number is an ad ID at the end of the title).
To solve this issue I use &rlm and &lrm infront of the id - but the catch is that I have to switch this two according which language is choosen.
My correct html is as this ( is what fixes the id number issue in farsi):
<h3>
The name of my خدمات باشد is long
<span style="color:#999;">#89798798</span>
</h3>
JS FIDDLE: http://jsfiddle.net/WzF2D/
I tried setting direction:ltr on the span wrapping around ID but it still won't work. I also tried to use unicode-bidi:embed on h3 but also no go.
How can I solve this by using css only without having to rely on ?
I will assume that the desired rendering uses overall right-to-left writing, even though the text (at least in the example) is mainly English, with some words in Arabic letters inside the sentence. Moreover, I assume that expressions like “#89798798” are to be treated as separate fragments, so that when it appears after an English word, it is not considered as part of English text but set to the left of it, in RTL layout.
Under these (rather astonishing) premises, the CSS solution is to make such a fragment a bidirectionality isolate:
<span style="color:#999; unicode-bidi: embed">#89798798</span>