Używanie CSS do wstawiania tekstu

207

Jestem stosunkowo nowy w CSS i wykorzystałem go do zmiany stylu i formatowania tekstu.

Chciałbym teraz użyć go do wstawienia tekstu, jak pokazano poniżej:

<span class="OwnerJoe">reconcile all entries</span>

Mam nadzieję, że uda mi się to pokazać jako:

Zadanie Joe: uzgadnij wszystkie wpisy

To znaczy, po prostu dlatego, że należę do klasy „Owner Joe”, chcę, aby tekst Joe's Task:był wyświetlany.

Mógłbym to zrobić za pomocą kodu takiego jak:

<span class="OwnerJoe">Joe's Task:</span> reconcile all entries.

Ale wydaje się to okropnie zbędne zarówno dla określenia klasy, jak i tekstu.

Czy można zrobić to, czego szukam?

EDYCJA Jednym z pomysłów jest próba ustawienia go jako ListItem, <li>gdzie „kula” to tekst „Zadanie Joe”. Widzę przykłady ustawiania różnych stylów pocisków, a nawet obrazów dla pocisków. Czy do wypunktowania listy można użyć małego bloku tekstu?

html css

— Abelenky
źródło

1

pomysł <li> nie jest dobrą praktyką. Jeśli naprawdę tego chcesz, spójrz na język szablonów.

— Gary

1

Wygląda na to, że używasz CSS3: przed lub: po pseudoelementach naprawdę przeniesiesz nadmiarowość do obszaru CSS (ponieważ musisz dodać instrukcję CSS dla OwnerJoe, OwnerJane itp.)

— Matt Beckman,

2

@Matt Beckman: Nie mam nic przeciwko. Mogę łatwo zdefiniować bloki CSS dla każdego z moich użytkowników. Powtarzanie tego w kółko w HTML wydaje się w moim przypadku nadmierne.

— abelenky

1

Wydaje mi się, że bardziej praktycznym zastosowaniem tego dla szerszej publiczności byłoby label.required:before {content: "* ";}dodanie gwiazdki przed wymaganymi polami.

— Patrick

317

Jest, ale wymaga przeglądarki obsługującej CSS2 (wszystkie główne przeglądarki, IE8 +).

.OwnerJoe:before {
  content: "Joe's Task:";
}

Ale wolałbym w tym celu używać Javascript. Z jQuery:

$('.OwnerJoe').each(function() {
  $(this).before($('<span>').text("Joe's Task: "));
});

— Marcel Jackwerth
źródło

4

Powinno być spacją za dwukropkiem.

— system PAUZA

7

Wstępne testy wskazują, że właściwość content działa dobrze. Gratulujemy znalezienia odpowiedzi, gdy wszyscy mówią, że nie da się tego zrobić. :)

— abelenky

8

Aby objąć starszą przeglądarkę IE, możesz warunkowo dołączyć code.google.com/p/ie7-js, co pozwoli na utrzymanie tego samego CSS dla wszystkich przeglądarek. Jest to alternatywa dla jQuery, która jest bliższa standardom.

— system PAUZA

15

Dlaczego wolisz używać Javascript?

— Rikki,

Interesujące: wydaje się współpracować z jednym lub dwoma dwukropkami, np. .OwnerJoe:beforeI.OwnerJoe::before

— Pan Kennedy

40

Odpowiedź przy użyciu jQuery, którą wszyscy lubią, ma poważną wadę, polegającą na tym, że nie jest skalowalna (przynajmniej tak, jak jest napisana). Myślę, że Martin Hansen ma właściwy pomysł, który polega na użyciu data-*atrybutów HTML5 . I możesz nawet poprawnie używać apostrofu:

HTML:

<div class="task" data-task-owner="Joe">mop kitchen</div>
<div class="task" data-task-owner="Charles" data-apos="1">vacuum hallway</div>

css:

div.task:before { content: attr(data-task-owner)"'s task - " ; }
div.task[data-apos]:before { content: attr(data-task-owner)"' task - " ; }

wynik:

Joe's task - mop kitchen
Charles' task - vacuum hallway

— Jeff
źródło

19

Ciekawym efektem ubocznym używania zawartości css w przeciwieństwie do jQuery jest to, że tekstu dostarczonego przez atrybut content nie można wybrać, co może, ale nie musi być pożądane ...

— Jeff

Jeśli tekst jest częścią układu strony, a nie częścią treści, być może CSS jest właściwym miejscem. Na przykład, jeśli chcesz, aby Twoja strona na wszystkich stronach była słowem „Witaj świecie” w kolorze fioletowym na limonkowym tle, miałoby to sens. Aby zmienić nagłówek strony, wystarczy edytować pojedynczy plik CSS. Gdybyś miał tekst w HTML, edytowałby każdą stronę w Twojej witrynie i być może zmieniałby również twoje aplikacje internetowe.

— bagaż

28

Sprawdź także funkcję attr () atrybutu treści CSS. Wysyła dany atrybut elementu jako węzeł tekstowy. Używaj go w ten sposób:

<div class="Owner Joe" />

div:before {
  content: attr(class);
}

Lub nawet z nowymi niestandardowymi atrybutami danych HTML5:

<div data-employeename="Owner Joe" />

div:before {
  content: attr(data-employeename);
}

— Martin Hansen
źródło

2

To zdecydowanie lepszy pomysł - nie podoba mi się pomysł stworzenia klasy css do wyświetlania treści. Może to spowodować generowanie css dynamicznie na podstawie zapytania SQL. Zastąpiłbym selektor przez div[data-employeename]:before.

— Johnny5

6

Po prostu napisz to w następujący sposób:

.OwnerJoe {
  //other things here
  &:before{
    content: "Joe's Task: ";
  }
}

— BartSabayton
źródło

18

To nie jest poprawny CSS, ale składnia Sass.

— Asfand Qazi