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.
Related
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).
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.
I have noticed, while looking at my page source, the characters showing just after a <div> tag. I went trough my coding and can't find where it is from; I did some research and they are saying that it is there so words can be cut.
Near the <h1> tag I have a floating image that is a little bit bigger than the title. I was wondering if that was causing it since I could extend the title on a second line because of the floating image but it remains.
How do I get rid of it? Why is it there?
Here is what the source looks like:
<div class="container">
<img src="floating_right.png">
<h1>Title</h1>
<div class="more stuff"> eventually justified text</div>
</div>
Any clues?
EDIT
This is my actual code;
echo '<div id="inputTag">';
echo '<img id="winClose" class="btn_close" src="http://images/html/bouttons/fermer.png" alt="Fermer">';
echo '<h1>'.$titre.'</h1><br>';
I might also mention that I am using Webmatrix 3.
EDIT
To fix this I have opened the file in Notepad++ and there it was;
echo '<div id="inputTag">-';
Voila!
This script will find and remove all the invisible s on your page:
document.body.innerHTML=document.body.innerHTML.replace(/\u00AD/g, '');
It works by searching for the Unicode character U+00AD. It's invisible when it doesn't sit at a line break, which is probably why you can't find it in your code.
Soft hyphen (shy) This character is not rendered visibly; instead, it suggests a place where the browser might choose to break the word if necessary. In HTML, you can use to insert a soft hyphen.
If you're finding in your code, I'd recommend leaving it there, especially if it's coupled with a <wbr> tag. See example below:
**Go full page, then open your console and change the viewport width. You'll notice how the word automatically breaks where is and adds the hyphen.
<h2>AAAAAAAABBBBBBBCCCCCCCDDDDDDEEE<wbr>EEEFFFFFFGGGGGGHHHHHHIIIIIIIJJJJJJJ</h2>
You can safely get rid of the tag in the example you have posted. is known as the soft hyphen and is used to break words up across multiple lines in web pages. You would normally expect to see it in the middle of really long words in a paragraph the same as you would hyphenate a long word in a written paragraph to space it over two lines in case you run out of page as you write it.
As for how to remove it, you can open the web page up using your website editor, locate the tag and simply delete it from the file as you would any other text on a web page when you edit the page normally.
A quick Google search showed this:
https://en.wikipedia.org/wiki/Soft_hyphen
Basically, it's a - I think. I would recommend looking for a - on your web page. If you don't see one I wouldn't recommend bothering with it unless you wanna use jQuery and make a simple script that'll remove it.
EDIT
It seems you want to get rid of it. I'd recommend trying to move around your images and play with them a little until it goes away.
I've got a simple textarea in a form and for some reason when I click in the textarea to begin to type, it centers the first line. I can hit backspace until it lines up at the start of textarea but I don't know why it's doing that. I've Googled and can't seem to find a reason why it would do this. Here is my jsfiddle for it:
http://jsfiddle.net/4cVkn/
I've tried text-align:left in numerous places (inline HTML and CSS) and it doesn't seem to change anything. It seems like it should be a simple fix, thanks for the help.
It isn't centred, it just has a default value of a series of space characters.
Put </textarea> immediately after the start tag instead of filling it with whitespace.
The default content of a text area is the content between its tags. Your source has something like:
<textarea name="bio">
</textarea>
so the initial value of the text area is the newline and the spaces used for indentation – the characters you can backspace over.
To get rid of them, close the tag immediately:
<textarea name="bio"></textarea>
Aside: the kind of form layout you're going for should probably be done using tables – at least until the various shiny new CSS3 layouts are better supported. Your avoiding them actually made the code less readable what with all the <br/>s.
When I try to create a navigation with inline-block, I get 4px to the right of each list item.
When I do it by floating each list item, it works fine.
Is there a reason the first option is applying that 4px? I have set EVERYTHING to have a margin of 0px and padding of 0px, I don't understand it. Even Firebug reports it as having 0, yet the gap is still there.
Thanks
Yes, space is by design and should be
Is there a reason for that? Yes it is. What got added is actually a word space. The same as if you'd have two lines of text. Browsers put a space between texts in separate lines so last words don't touch first words of the next line:
<p>
This is my text that's in two lines
inside my HTML source.
</p>
There would be a usual word space between lines and inside so text gets correctly displayed in browser:
This is my text that's in two lines inside my HTML source.
The same happens in your case, because your elements are inline. Your navigation elements are listed one per line in HTML source hence a word break gets added between them.
How to avoid excessive spaces between elements?
There are basically 3 approaches to mitigate this problem. All of them work on the premise to put all elements in the same line as seen by the HTML renderer:
Put all elements unspaced in a single line:
<ul>
<li>First</li><li>Second</li>...<li>Last</li>
</ul>
This one actually puts all elements in one line which may make it harder for people to manipulate these elements. If every LI would have an anchor tag inside (with a long link), this line gets too long to handle.
Comment-out line breaks:
<ul><!--
--><li>First</li><!--
--><li>Second</li><!--
...
--><li>Last</li><!--
--></ul>
Make tags break the line:
<ul
><li>First</li
><li>Second</li
...
><li>Last</li
></ul>
This one is least obtrusive to the eye but may seem confusing to beginners hence other team members (if you work in such environment) may feel tempted to put tag ends back to where they were originally (and usually are). They may feel these were broken by error.
The result of all three of them can be seen in this JSFiddle example.
Pick the one that suits you best. I usually use commenting because it's least distracting in my development editor because comments are very subtle.