HTML/CSS Cách ngăn chặn văn bản làm nổi bật từ toàn bộ chiều rộng của trang trong google chrome

Question

Về cơ bản khi tôi sử dụng Google chrome và đánh dấu văn bản trên một số trang web, điểm nổi bật kéo dài toàn bộ chiều rộng của trình duyệt thay vì chỉ làm nổi bật văn bản. Làm thế nào CSS có thể được điều chỉnh để làm cho nó để khi bạn đánh dấu văn bản, nó chỉ làm nổi bật các từ hơn là span trên toàn bộ trang là tốt. Một ví dụ tốt để xem là http://guides.rubyonrails.org/getting_started.html. Hãy thử làm nổi bật văn bản không phải mã trong Google chrome và bạn có thể thấy những gì tôi đang nói đến.

Answer 1

Phần OCD của tôi đã tự hỏi này cũng như: điều duy nhất tôi đã nhận thấy (mặc dù điều này là không phải là một giải pháp toàn diện) là nổi các yếu tố thể hiện hành vi bạn đang theo dõi. This Fiddle hiển thị phiên bản trực tiếp (ảnh chụp màn hình bên dưới), theo đó hai số divs giống hệt nhau, hãy lưu một số có tuyên bố float: left;, ngăn chặn việc đánh dấu văn bản từ việc mở rộng toàn bộ trang.

Nếu đó là một vấn đề đủ lớn cho bạn (mặc dù tôi muốn nói cách khác), bạn có thể nổi container chính của bạn để đảm bảo rằng làm nổi bật văn bản bị ràng buộc với nó. giải pháp "solendil" của dường như là quá mức cần thiết, giới thiệu một lỗ hổng khả năng sử dụng rất lớn (làm thế nào khó chịu để không thể chọn văn bản) vì lợi ích của một ít phiền toái thị giác nhỏ.

Cập nhật: như mỗi câu trả lời @ AndreZS, thêm một giá trị position khác với mặc định static cũng hạn chế các văn bản làm nổi bật cho phần tử đó (Tôi nghĩ rằng hành vi này đã thay đổi trong những năm kể từ khi câu trả lời ban đầu của tôi). Nó sẽ đưa một người quen thuộc với WebKit để giải thích chính xác những gì đang xảy ra để kích hoạt hành vi mong muốn: có vẻ như một cái gì đó để làm với cách bố trí của một yếu tố và làm thế nào nó đang được rút ra.

Answer 2

Bạn không thể thay đổi máy móc của thuật toán đánh dấu. Điểm nổi bật kéo dài thông qua paddings và lề, mà là gây phiền nhiễu đôi khi. Những gì bạn có thể làm là ngăn chặn bất kỳ lựa chọn văn bản với CSS

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

Answer 3

Trong tệp .css của bạn, hãy sử dụng position: relative; trong phần div sẽ chứa văn bản của bạn.

Answer 4

.content{ 
    display:inline-block; 
} 

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

Giải pháp bởi CherryFlavourPez, sử dụng phao, sẽ dẫn đến biến chứng hơn nữa như container sẽ không kéo dài theo div phao bên trong.