Dynamischer Text, unterstrichen durch geschweifte Klammern

8

Ich möchte ein Wort mit einer runden Klammer unterstreichen. Dies sollte Teil eines C # -Text sein, aber wenn es in CSS einfacher ist, kein Problem. Mein Problem ist, dass die Länge des Wortes variieren kann, also muss der Bogen für jedes Wort berechnet werden.

Meine erste Idee war die Verwendung von CSS box-shadow:

CSS:

%Vor%

HTML:

%Vor%

Leider aufgrund der dynamischen Textgrößen kann ich sie nicht berechnen.

Gibt es einen intelligenteren Ansatz für dieses Problem?

    
Trinitrotoluol 01.07.2014, 19:07
quelle

2 Antworten

10

Sie müssen die Breite nicht berechnen, wenn Sie stattdessen Span-Tags verwenden.

CSS:

%Vor%

HTML:

%Vor%

Arbeitsgeige : Ссылка

    
entropic 01.07.2014, 19:13
quelle
2

Ich habe einen anderen Ansatz gefunden.

Arbeitsgeige: Ссылка

Ich habe JavaScript verwendet und die Breite dynamisch gemacht:

textWidth-Funktion aus hier .

%Vor%

Es funktioniert auch mit h1, div oder span. Du kannst meine Geige überprüfen. Weil es Span Elemente verwendet, um die Breite des Elements zu berechnen.

    
Tough Coder 01.07.2014 19:20
quelle

Tags und Links