What is ­ and how do i get rid of it - html

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.

Related

IntelliJ - Have "Reformat Code" remove unnecessary HTML newlines in text?

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.

Fit text in container without breaking word using HTML/CSS only

On my webpage I've used fancybox for preview section of description text in popup. Text shows perfectly fine on desktop but on popup it shows something like this.
Please note that the descriptive text I'm getting for the display it include for each space user gives for the sentence after each word.
and when I use word-break: break-all; it gets like this
then I've used word-break:break-word; also and get this
you can spot the difference now, that it breaks word viz clearly not acceptable. I want to break sentences meaningfully not the word!
Problem is I can only use HTML/CSS only here for fixing this, have looked many que/ans here but no luck.
Please help me into this.
I've created a JSFiddle please look into this may be this will help to understand clearly.
Note: If you don't want to modified server side scripts, you can use this JavaScript solution instead. I don't think you can do so with CSS only without doing any amendments in your server side code to remove these &nbps;.
In that case, you should first decode HTML special chars to simple text using following JavaScript code.
var text = $("<textarea/>").html('your HTML encoded text here with and all').text();
$('your viewing div/p selector').html(text);
And add this CSS property in your viewing div or p.
white-space: pre-wrap;
It should work.
Use word-wrap:break-word;
It even works in IE.
There are many possible values of the css "word-break" property.
http://www.w3schools.com/cssref/css3_pr_word-break.asp
word-break:break-word;
https://jsfiddle.net/1acbtr82
word-break:keep-all;
https://jsfiddle.net/dabros/1acbtr82/1/
The first works fine but does break up "googling" into "googlin-g", the second refuses to even do that.

Decrease the line spacing when using a multi-line image title tag

I have created a title tag for an statement and am using php commands and to create multiple lines for the title. Is there a way to decrease the line spacing between these lines or another way to have multiple lines in the title tag? I need to use the SIZE and LINE-HEIGHT commands as well as others for this multi-line text.
This is what I have:
<a href="http://www.mydomain.com/storage/<?php echo $rows['file']; ?>"
title="<?php echo $rows['field1'].$rows['field2']; echo "<br>";?>line 2
<?php echo "<br>"; ?>Line 3">Click Here</a>
I have tried a STYLE command within the tag for the SIZE and it didn't work.
I have tried putting an totally around the existing and that didn't work either.
Any ideas???
The tooltips that browsers generate from title attributes cannot be styled in CSS, or in any other way. (The font can be changed by the user, but not the author.) Line breaks inside those values should be respected by browsers, but this cannot be counted on.
The tooltips also vanish after a few seconds. A usability nightmare really, if the text is several lines long.
The morale is that it is much better to use “CSS tooltips” based on completely different techniques. (You can also use JavaScript, but it’s not really needed.)
For newlines in the title text, you just put newlines in the value. See How can I use a carriage return in a HTML tooltip? for more details about that part. Not sure if you can adjust the size/spacing of this text with CSS, though you could create custom popups w/ DIV tags and some jQuery. Then you'd have full control over how they look. Maybe use something someone already built, there's a bunch to choose from at http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

Textarea Centers First Line Of Text And I Want It To Be Left-Aligned

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.

TinyMCE deleting content on paste

I'm implementing TinyMCE in a website and I'm having issues with pasting, I wondered if anyone has had this bug before.
The basic structure inside the textarea is like this:
<h5>I am a heading</h5>
<p>I am a paragraph</p>
So when I first start editing if I place the cursor at the beginning of the editor and hit return a couple of times, then go back to the top to paste something in above the h5, the paste wipes out the h5.
When I look in the format dropdown before I paste, it says I'm still in a heading 5 and in the status bar it says 'Path: div » h3 » span.-span', is there a common solution to this problem?
Thanks
Update - I've just noticed this happens when I insert a line break instead of pasting too.
Update 2 - It happens to the h5 if I have applied a colour to it within TinyMCE.
So I colour the heading, then put the cursor before it, press return and try to paste/line break in the new space above and that clears it out. When coloured the html of the h5 looks like this:
<h5>
<span style="color: #0000ff;">
I am a heading
</span>
</h5>
Ok, I revisited this problem and I figured it out.
It seems that through either something I did or through some bug from an action on TinyMCE (perhaps paste from Word?) a clearing div got wrapped around the content (or sometimes part of the content) and saved in the database that looked like this:
<div style="clear: both;">
The content
</div>
Whenever a paste or a linebreak insert was done inside this div it cleared the rest of the content, and removing the div fixed the issue.
I'm sorry I cannot uncover what caused this but I hope that at least helps anyone searching.
*Edit*
I think this may have to do with pasting from word and the allowed tags in tinyMCE.
Using tinyMCE as a more fully fledged web page editor I believe it is good practice to include the following line in the initialization options:
valid_elements : '*[*]'
That will make tinyMCE allow any html tags you wish, and though I have yet to test it I believe this would also fix my pasting issue.