Giới hạn chiều rộng đường viền thành chiều rộng văn bản trong một phần tử khối

Question

Tôi có một tiêu đề <h2> thành cố định với <div> (238px). Khi trang này được hiển thị, trình duyệt quản lý ngắt dòng vào tiêu đề để làm cho văn bản vừa với chiều rộng (238px).

Nhưng thuộc tính chiều rộng của phần tử h2 vẫn là 238px, không có vấn đề gì khi ngắt dòng.

Tôi muốn đặt border-bottom chỉ dưới văn bản và không dưới chiều rộng đầy đủ của phần tử h2 và tôi không biết cách đạt được điều này bằng cách sử dụng CSS.

Bạn có thể xem những gì tôi muốn nói ở đây: http://jsfiddle.net/np3rJ/2/

Cảm ơn

Answer 1

Nếu bạn sẵn sàng sử dụng display: table-cell và các phần tử giả, bạn có thể có một giải pháp khá tốt (với một số hạn chế nhỏ).

HTML không thay đổi:

<div class="dossier_titre"> 
    <h2>Horizon 2020, nouvelles opportunités</h2> 
</div> 

và bạn có thể áp dụng CSS sau đây:

.zone_33 { 
    width: 238px; 
    padding: 0px; 
    margin: 0px; 
} 

.zone_33 .dossier_titre { 
    margin: 0px 0px 20px 0px; 
} 

.zone_33 h2 { 
    color: #616263; 
    font-size: 150%; 
    font-weight: lighter; 
    padding: 0px 0px 12px 0px; 
    background: none; 
    border-bottom: 1px solid grey; 
    display: table-cell; 
    text-transform: uppercase; 
} 

.zone_33 .dossier_titre:after { 
    content: ""; 
    display: table-cell; 
    width: 100%; 
} 

Đối với các yếu tố <h2>, thiết display: table-cell, và thêm một phần tử giả sau .dossier_titre (các chứa khối cho phần tử tiêu đề/tiêu đề). Phần tử giả cũng là table-cell và có chiều rộng là 100% (đây là khóa).

Ngoài ra, vì h2 không còn là phần tử khối, hãy thêm lề của bạn thành .dossier_titre để duy trì khoảng cách trực quan trong bố cục của chúng tôi.

cách làm việc này
tôi đang tạo ra một bảng hai tế bào với tế bào thứ hai (phần tử giả) có chiều rộng 100%.Điều này kích hoạt trình duyệt để tính toán độ rộng co lại cho vừa với ô đầu tiên (h2) có chứa văn bản tiêu đề. Do đó, chiều rộng của ô đầu tiên là mức tối thiểu cần thiết để hiển thị văn bản. Đường viền dưới cùng miễn là dòng văn bản dài nhất trong khối văn bản bên trong ô bảng.

Hạn chế
table-cell không được hỗ trợ trong IE7 mà không có một hack, nhưng công việc xung quanh đã được khá nổi tiếng và có thể được tìm thấy nếu cần thiết.

Nếu tiêu đề có nhiều từ ngắn, bạn có thể bị ngắt dòng ở những nơi không mong muốn. Bạn sẽ cần phải chèn &nbsp để giữ các từ cụ thể cùng nhau khi cần.

Fiddle: http://jsfiddle.net/audetwebdesign/h34pL/

Answer 2

lẽ display: inline-block; Hoặc display: inline; là những gì bạn cần?

Answer 3

Tại sao không thử:

text-decoration:underline 

?

CHỈNH SỬA

Chỉ cần tạo khoảng xung quanh "OPPORTUNITÉS" với gạch dưới.

<h2>Horizon 2020, nouvelles <span class="underline">opportunités</span> </h2> 
.underline { 
    text-decoration:underline 
} 

Answer 4

Tôi nghĩ rằng đây là những gì bạn cần:

<h2><span>Horizon 2020, nouvelles opportunités<span></h2> 

h2 span { 
    position: relative; 
    padding-bottom: 5px; 
} 
h2 span::after{ 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 100%; 
    height: 1px; 
    border-bottom: 1px solid #000; 
    content: "" 
} 

cfr fiddle này: http://jsfiddle.net/b8cwD/4/

tôi đã sử dụng các kỹ thuật được mô tả trong câu trả lời này: Advanced CSS challenge: underline only the final line of text with CSS

tôi đã giới thiệu một span vào H2 để không thay đổi thuộc tính hiển thị của nó, nhưng bạn có thể dễ dàng sử dụng kỹ thuật tương tự với số display: inline trên H2 của bạn.

Answer 5

Hãy thử điều này, (tôi nghĩ nó sẽ giúp bạn)

.heading { 
    position: relative; 
    color: $gray-light; 
    font-weight: 700; 
    bottom: 5px; 
    padding-bottom: 5px; 
    display:inline-block; 
} 

.heading::after { 
    position: absolute; 
    display:inline-block; 
    border: 1px solid $brand-primary !important; 
    bottom: -1px; 
    content: ""; 
    height: 2px; 
    left: 0; 
    width: 100%; 
}