Có bộ chọn CSS để chọn văn bản (các khối nội tuyến) trong một hộp hình chữ nhật không?

Question

Quy tắc CSS có thể chọn phần của hộp có chứa văn bản (hoặc khối nội tuyến) không?

Ví dụ, một đoạn HTML như <p>The quick brown fox jumped over the lazy dog</p> có thể được đặt ra như thế này:

+--------------------------+ 
| The quick brown fox  | 
| jumped over the   | 
| lazy dog    | 
+--------------------------| 

Nếu tôi tạo ra một quy tắc CSS như p { background: red } sau đó toàn bộ hộp/hình chữ nhật sẽ có một nền đỏ, trong đó có "khoảng trắng "ở cuối mỗi dòng.

Có cách nào để chỉ định bộ chọn sao cho, trên mỗi dòng, chỉ văn bản thực tế có nền màu đỏ không?

Tôi nhận thấy rằng theo mặc định, con trỏ thay đổi từ 'mũi tên' thành 'i-beam' khi nó thực sự trên văn bản; khi nó ở nơi khác trong hộp đoạn văn, không phải trên văn bản, thì đó là một mũi tên không phải là một chùm tia chữ I.

Nếu tôi chỉ định quy tắc rõ ràng như p { cursor: crosshair } thì nó có hiệu quả ở mọi nơi trong hộp hình chữ nhật. Một lần nữa, có thể có quy tắc được chọn chỉ khi con trỏ thực sự nằm trên văn bản không?

Answer 1

Những gì bạn có thể làm là để bọc các văn bản trong một yếu tố tuổi, và sau đó thiết lập các nền và con trỏ tính với nó.

Answer 2

Không có cách nào để làm chính xác những gì bạn muốn theo như tôi biết vì bộ chọn CSS không khớp với nút văn bản. Bạn sẽ phải bọc văn bản trong một khoảng và sau đó phong cách nhịp.

Answer 3

jsut một đoạn mã đơn giản để giúp có thể:

thêm một hoặc hai extra..not cần thiết theo phong cách mặc dù .. hy vọng nó sẽ giúp ..

p { 
    background-color: gray; 
    width: 700px; 
    height: 500px; 
    margin:auto; 
} 

span { 
    background-color: red; 
    width: 500px; 
    height: 200px; 
    border: 2px blue; 
    border-style: dotted dashed; 
    font-size: 2em; 
    display: block; 
    margin:auto; 
}