<span> dây chồng chéo trong một đoạn

Question

Hãy nói rằng tôi có văn bản như:

<p>There are many people in Asia.</p> 

Tôi muốn để phù hợp với hai chuỗi: many people, và people in Asia. Tôi muốn đầu ra để trông giống như cả hai chuỗi đã được tìm thấy một cách độc lập, có lẽ áp dụng một gạch dưới màu khác nhau để mỗi chuỗi phù hợp, như vậy:

Nhưng, trong HTML Tôi không thể chồng lên nhau kéo dài bởi vì nếu tôi đã cố gắng này:

span.first { border-bottom: 1px solid red; } 
span.second { border-bottom: 1px solid blue; } 

<p>There are 
    <span class="first">many <span class="second">people</span> in Asia</span>. 
</p> 

đầu tiên </span> sẽ đóng span.second.

Suy nghĩ của tôi là đặt vị trí div s bên dưới văn bản sao cho văn bản phù hợp trong số p ở trên, nhưng tôi đặt cược các div đó với vị trí bắt đầu và kết thúc của chuỗi phù hợp sử dụng CSS sẽ là một cơn ác mộng .

Bất kỳ suy nghĩ nào về cách thực hiện việc này?

Answer 1

Bạn có thể đặt mọi từ trong phần tử nhịp riêng của riêng mình và sau đó sử dụng các lớp để tạo kiểu cho chúng một cách thích hợp. Một số các nhịp sẽ có nhiều lớp mà gạch dưới chồng lên nhau. Loại đánh dấu chi tiết và xấu xí nhưng tôi nghĩ rằng nó sẽ giải quyết vấn đề của bạn.

Answer 2

Bạn có thể đánh dấu các thành phần chồng chéo seprately, ví dụ .:

<p>There are 
    <span class="first">many </span> 
    <span class="overlap">people</span> 
    <span class="second"> in Asia</span>. 
</p> 

Answer 3

HTML:

<p>There are 
     <span class="first">many </span> 
     <span class="second">people</span> 
     in Asia. 
    </p> 

CSS:

span.first { border-bottom: 1px solid red; } 
span.second { border-bottom: 1px solid blue; } 

Answer 4

Bạn có thể làm điều này:

<p>There are 
    <span class="first">many <span class="second">people</span></span> 
    <span class="second">in Asia</span>. 
</p> 

Không gọn gàng như hai giải pháp khác, nhưng nó sẽ tạo kiểu theo cách tương tự như ví dụ ban đầu của bạn.