Ogranicz szerokość obramowania do szerokości tekstu w elemencie bloku

Question

Mam tytuł <h2> na stały z <div> (238px). Po wyrenderowaniu tej strony przeglądarka zarządza podziałem linii na tytuł, aby tekst pasował do szerokości (238 pikseli).

Ale właściwość width elementu h2 to nadal 238 pikseli, nie ma znaczenia, gdzie są podziały wiersza.

Chcę ustawić border-bottom tylko pod tekstem, a nie pod pełną szerokością elementu h2, i nie wiem, jak to osiągnąć za pomocą CSS.

Można zobaczyć, co mam na myśli tutaj: http://jsfiddle.net/np3rJ/2/

Dzięki

Answer 1

Jeśli chcesz używać display: table-cell i pseudoelementów, możesz mieć całkiem niezłe rozwiązanie (z niewielkimi ograniczeniami).

HTML nie zmienia:

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

i można zastosować następujący CSS:

.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%; 
} 

dla elementu <h2>, zestaw display: table-cell i dodać pseudo-element po .dossier_titre (the zawierający blok dla elementu nagłówka/tytułu). Pseudoelement jest również table-cell i ma szerokość 100% (jest to klucz).

Ponadto, ponieważ h2 nie jest już elementem blokowym, dodaj swoje marginesy do .dossier_titre, aby zachować odstępy wizualne w naszym układzie.

jak to działa
tworzę tabeli dwie komórki z drugą komórką (pseudo-element) o szerokości 100%.Spowoduje to uruchomienie przeglądarki, aby obliczyć szerokość zmniejszania do dopasowania pierwszej komórki (h2), która zawiera tekst tytułu. Szerokość pierwszej komórki jest zatem minimalna, potrzebna do wyświetlenia tekstu. Dolna krawędź jest najdłuższa w wierszu tekstu w komórce tabeli.

Ograniczenia
table-cell nie jest obsługiwana w IE7 bez hack, ale praca wokół jest dość dobrze znane i można je znaleźć w razie potrzeby.

Jeśli tytuł zawiera wiele krótkich słów, możesz uzyskać łamanie linii w nieoczekiwanych miejscach. Musisz wstawić &nbsp, aby zachować określone słowa w razie potrzeby.

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

Answer 2

Może display: inline-block; Albo display: inline; jest to, czego potrzebujesz?

Answer 3

Dlaczego nie spróbować:

text-decoration:underline 

?

EDIT

Tylko rozpiętość Around "opportunites" z podkreśleniem.

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

Answer 4

myślę, że to jest to, czego potrzebujesz:

<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 to ryba: http://jsfiddle.net/b8cwD/4/

użyłem techniki opisanej w tej odpowiedzi: Advanced CSS challenge: underline only the final line of text with CSS

I wprowadził span do H2, aby nie zmieniać atrybutu wyświetlania, ale możesz równie łatwo użyj tej samej techniki z display: inline w twoim H2.

Answer 5

Spróbuj to (myślę, że będzie Ci pomóc)

.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%; 
}