HTML/CSS Jak zapobiegać podświetlaniu tekstu rozciągającego się na całej szerokości strony w Google Chrome

Question

Zasadniczo, gdy używam Google Chrome i zaznaczam tekst w niektórych witrynach, wyróżnienie obejmuje całą szerokość przeglądarki, a nie tylko podświetla tekst. W jaki sposób można dostosować CSS tak, aby podświetlając tekst wyróżnił tylko słowa, a nie zakres całej strony. Dobrym przykładem jest http://guides.rubyonrails.org/getting_started.html. Spróbuj podświetlić tekst bez kodu w Google Chrome i zobaczysz, o czym mówię.

Answer 1

Część OCD mnie zastanawiał to także: jedyną rzeczą, jaką zauważyłem (choć bynajmniej nie jest kompleksowe rozwiązanie) jest to, że płynął elementy wykazują zachowanie, którego szukasz. This Fiddle pokazuje wersję na żywo (zrzut ekranu poniżej), przy czym dwa divs są identyczne, z wyjątkiem deklaracji float: left;, która zapobiega rozpraszaniu tekstu na całej stronie.

Jeśli jest to dla ciebie wystarczająco duży problem (chociaż powiedziałbym inaczej), możesz unieść swój główny pojemnik, aby upewnić się, że podświetlanie tekstu jest do niego ograniczone. @ "rozwiązanie" solendilu wydaje się być masowym przesadą, wprowadzając ogromną wadę użyteczności (jak denerwujące, aby nie móc wybrać tekstu) ze względu na niewielką wizualną irytację.

Aktualizacja: jak na użytkownika @ AndreZS odpowiedzi, dodając position wartość inną niż domyślna static ogranicza również tekst podkreślający do tego elementu (myślę, że to zachowanie zmieniło się w latach od mojego pierwotnego odpowiedź). Ktoś, kto jest zaznajomiony z WebKit, mógłby wyjaśnić, co dokładnie dzieje się, aby wywołać pożądane zachowanie: wydaje się, że ma to jakiś związek z układem elementu i sposobem jego rysowania.

Answer 2

Nie można zmienić machanizmu algorytmu podświetlania. Punkt kulminacyjny rozciąga się na paddings i marginesach, co czasem jest denerwujące. Co można zrobić, to zapobiec zaznaczenie tekstu z CSS

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

Answer 3

W pliku .css użyj position: relative; w sekcji div, która będzie zawierać Twój tekst.

Answer 4

.content{ 
    display:inline-block; 
} 

http://jsfiddle.net/V7ahp/4/

roztworu przez cherryflavourpez za pomocą pływaka, doprowadzi się do dalszego powikłanie jak pojemnik nie rozciągnie według div pływaka wewnątrz.