Html/CSS How to Prevent Highlighting Text from Spanning Entire Width of Page in Google Chrome

HTML/CSS How to prevent highlighting text from spanning entire width of page in google chrome

The OCD part of me has wondered this as well: the only thing I've noticed (though this is by no means a comprehensive solution) is that floated elements exhibit the behaviour you're after. This Fiddle shows a live version (screenshot below) whereby the two divs are identical save that one has the declaration float: left;, which prevents text highlighting from spanning the entire page.

If it's a big enough issue for you (though I'd say otherwise), you could float your main container to ensure that text highlighting is constrained to it. @solendil's "solution" seems to be massive overkill, introducing a huge usability flaw (how annoying to not be able to select text) for the sake of a minor visual annoyance.

Text highlighting in Chrome

Update: as per @AndreZS's answer, adding a position value other than the default static also restricts the text highlighting to that element (I think this behaviour has changed in the years since my original answer). It would take someone familiar with WebKit to explain what exactly is going on to trigger the desired behaviour: seems like something to do with the layout of an element and how it is being drawn.

css: how to make br not highlighted when selecting text (in Chrome)

I think you would need read this question with all its answers.

By the way if you need to simulate this behavior in Chrome I think you can simulate a <br/> with <span>. Something like this:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p.normal::selection {
    background:#cc0000;
    color:#ff0;
}
p.normal span::selection {
    background:#cc00ff;
    color:#ff0;
}
p.normal span {
    width:100%;
    clear:left;
    display: block;
    height: 1em;
}

p.moz::-moz-selection {
    background:#cc0000;
    color:#ff0;
}

p.webkit::-webkit-selection {
    background:#cc0000;
    color:#ff0;
}
</style>
</head> 
<body>
    <p class="normal">Hello Normal
    <span></span>
    <span></span>
    <span></span>
    How are you?
    </p>
    <p class="moz">Hello Mozilla
    <br/>
    <br/>
    <br/>
    How are you?
    </p>
    <p class="webkit">Hello Webkit
    <br/>
    <br/>
    <br/>
    How are you?
    </p>
</body>
</html>

EDIT:

After several tests, I concluded that to replicate the behavior in Chrome you would need a javascript that replicate this styles.

EDIT2:

To remove the pink border in the second line I make another demo (I think it's more clear).

Anyway to prevent the Blue highlighting of elements in Chrome when clicking quickly?

You can use pure CSS to accomplish this. Here's a rundown for multi-browser support, chrome being covered by the first line and the final :focus bit. Details below.

.noSelect {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.noSelect:focus {
    outline: none !important;
}

Simply add the class="noSelect" attribute to the element you wish to apply this class to. I would highly recommend giving this CSS solution a try. Some have suggested using JavaScript, but I believe this is the cleanest solution.

For Android/Safari mobile/Edge

-webkit-tap-highlight-color: transparent; is the additional rule you may be looking for. Affects Chrome desktop (esp. with touchscreen) and mobile devices. Here's a warning about using this non-standard property, as well as some accessibility concerns with suggestions. Best practice is to replace the highlight with your own styling.

UPDATE: Later versions of Chrome...

A commenter on this answer pointed out :focus { outline: none !important;} is needed for newer versions of Chrome. Answer adapted to include this, as well! Ah, ever-changing standards.

Overflowing select highlight

~~Interestingly, I've wondered why SO doesn't have something like this so it's easier to copy code off an question/answer.~~

Actually, SO does have contained highlighting in the <code> blocks relying on overflow: auto;. <blockquotes> do not have contained highlighting.

Anyway, it appears there are a few ways to solve this problem (though, I'm sure there might be more). Use one of the following CSS rules to limit the highlighting of text to a specific element.

overflow: hidden; or overflow:auto;
position: relative;
float:left; or float:right;

The working example below shows all four methods at work. Some are easier to work with depending on your needs.

Working Example: http://jsfiddle.net/TFvYu/4/

Sources

CSS text selection color overflows outside box
HTML/CSS How to prevent highlighting text from spanning entire width of page in google chrome

How to prevent headings ( h1 ) from taking up more width than they need?

You can give it display: inline. This will make it behave like any text element - the default for <h1> is display: block.

There are other ways: float: left for example, but I find this the simplest and the one with the fewest side effects.

Note that you will then probably have to add a <br> to ensure a line break after the <h1>.

Prevent copying text in web-page

Here:
How to disable text selection highlighting using CSS?

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

Disallow them from being able to answer when the window's onBlur event is fired. They can still use other devices, but they won't be able to cheat on the same computer.

Highlighting Part of a Result

For this to work you would need span-elements with the class highlight around you're variables. For semantics it might be better if the element with the id result is a p-element or something similar.

Also as @user1599011 pointed out, your Javascript needs to do something, it needs to execute a command, not return it.

A working solution:

let principal = '1000';
let rate = '10';
let interest = '100';
let year = '2022';

/* Function that computes and returns the result */
function compute()
{
  document.getElementById("result").innerHTML= 'If you deposit <span class="highlight">' +principal+ '</span>, <br>at an interest rate of <span class="highlight">' +rate+ '%</span><br>You will receive an amount of <span class="highlight">' +interest+ '</span>, <br>in the year <span class="highlight">' +year+ '</span><br>';
}

/* Highlights the result */
.highlight {
    background-color: yellow;
}

<!--- On clicking the button it computes the interest by calling the compute() function --->
<button onclick="compute()">Compute Interest</button>
<!--- Show computation result --->
<p id="result"></p>

How can I wrap or break long text/word in a fixed width span?

You can use the CSS property word-wrap:break-word;, which will break words if they are too long for your span width.

span { 

    display:block;

    width:150px;

    word-wrap:break-word;

}

<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>

Html/CSS How to Prevent Highlighting Text from Spanning Entire Width of Page in Google Chrome