Question

So I am using a function to select text in a <div>. It works, but I don’t like the way it displays in Google Chrome. You can see my work here. Click the button and the text in the <div> gets selected, but in Chrome, the selection stretches all the way across to the right of the window, which isn’t good. It works like I want it in Firefox and IE, though.

The <div>, of course, has a width on it of 200px. I tried also putting a max-width declaration on, but that wasn’t any good either. Is there any way to keep the selection from displaying this way?

Answer 1

Try adding the CSS rule display:inline-block to your div:

#result {
    width: 200px;
    font-family: Arial;
    font-size: 10pt;
    text-align: center;
    padding: 8px;
    border: 2px solid black;
    display:inline-block;
}
​

jsFiddle example