[CSS] Dopasowanie tła do długości tekstu

Question

Hej! Średnio znam CSS i nie pragnę się tego nauczyć (znam ideę, mniej więcej zasady działania), ale robie customowego alerta do streamów i potrzebuję porady jak zrobić aby szerokość tła dopasowywała się do tekstu. Chodzi o to, że za każdym razem jak ktoś obserwuje to długość nicków jest różna. Chodzi o backgound-color, nie image.

^ to przykładowo powinno być szersze.

Dzięki za pomoc!

Answer 1

Prawdopodobnie potrzebujesz ustawić background-clip na content-box. To spowoduje, że tło będzie ustawiane dla contentu (tekstu), a nie dla całej powierzchni ograniczonej przez border (domyślne istawienie).

Demo: https://codepen.io/JSHolic/pen/LYNypXP

Comments

Hah, fascynujące.. Teraz jesteśmy o duży krok do przodu. To rozwiązanie powoduje, że jeśli tekst jest dłuższy niż powinien to rozciąga tło o linijkę w dół.

Przy tym rozwiązaniu chyba pozostanę, bo ciężko będzie uzyskać zamierzony efekt. Jeśli jednak wpadnie Ci jakiś pomysł - będę wdzięczny.

---

A czego brakuje Ci w tym rozwiązaniu?

---

Docelowo chciałem, aby to wyglądało tak jak przedstawił to VBService poniżej, tj. dopasowanie długości tła do długości tekstu. Na ten moment wygląda to tak:

---

Nie bardzo rozumiem o co chodzi. Użycie background-clip: content-box dla elementu #alert-text powoduje, że tło jest rysowane w obrębie contentu tego elementu. Jeśli chcesz, żeby tło miało dodatkowy odstęp od tekstu, to nadaj elementom #alert-message i #alert-user-message (dzieci elementu #alert-text) padding.

---

Dobra, jasne. Bardzo mi pomogłeś.

Dzięki!

Answer 2

padding: 5px 10px;

https://codepen.io/vbservice/pen/PoNmPVp

#alert-message,
#alert-user-message {
    text-align: center;
    padding: 5px 10px;
}

lub

#alert-message,
#alert-user-message {
    text-align: center;
    padding-left: 10px;
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 5px;
}

 

Comments

Dzięki za chęci! Jednak to totalnie nie działa, przynajmniej w sekcji w której Ty napisałeś aby to dodać.

---

Musisz podać wygenerowany kod html tego co jest podstawiane w {messageTemplate}

    <!-- alert message -->
    <!-- messageTemplate will be replaced with your message template -->
    <!-- for example : {name} is now following! or {name} donated {amount} -->
 
    <div id="alert-message">{messageTemplate}</div>
                                    |
                                   TEGO

w to miejsce jest wstawiany kod html nick-a według tego opisu:

<!-- alert message -->
<!-- messageTemplate will be replaced with your message template -->
<!-- for example : {name} is now following! or {name} donated {amount} -->

 

---

Ale w jaki sposób mam to zrobić?

---

Pewnie w jednej z tych zmiennych template-owych znajduje się znacznik #alert-box, o który pytałem. :)

---

Umieść kod na serwerze i wygeneruj stronę w oparciu o niego w przeglądarce. A później:

---

Czy to będzie to?

<div id="alert-box">

      <!-- particles -->
      <div id="particles"></div>
      <!-- wrap window -->
      <div id="wrap">
        <!-- alert image -->
        <div id="alert-image-wrap">
          <div id="alert-image">{img}</div>
        </div>

        <!-- main alert box window -->
        <div id="alert-text-wrap">
          <!-- alert text -->
          <div id="alert-text">
            <!-- alert message -->
            <div id="alert-message">
              {messageTemplate}
            </div>
            <div id="alert-user-message">{userMessage}</div>
          </div>
        </div>
      </div>
  </div>

 

---

To jest kod html template.

---

Wygenerowałem stronę i szukałem, tylko do końca nie wiem czego.. 

---

Wrzuć cały kod html wygenerowanej strony, albo szukaj tego
<div id="alert-message"> i to co jest tu ... </div>

---

Szukając poprzez zbadaj element znalazłem tylko to, co dodałem wyżej.

Dodam tylko, że 

{messageTemplate}

to jest treść wpisana na stronie w rubryce message template