Paano gumawa: Paghahati ng teksto

Paano gumawa ng responsibleng paghahati ng teksto

Unang - Magdagdag ng HTML:

<div class="divider">Lorem Ipsum</div>

Ikalawa - Magdagdag ng CSS:

.divider {
  font-size: 30px;
  display: flex;
  align-items: center;
}
.divider::before, .divider::after {
  flex: 1;
  content: '';
  padding: 3px;
  background-color: red;
  margin: 5px;
}

Subukan mo ito!

Paliwanag ng halimbawa:

Ang halimbawa na ito ay nagtuturo kung paano gumawa ng paghahati ng teksto gamit ang CSS. Sa partikular, ginagamit ang kombinasyon ng HTML at CSS upang magkaroon ng ganitong epekto.

Unang, kailangan mong magdagdag ng isang elemento na may klase 'divider' na <div> sa HTML at ilagay ang teksto na gusto mong ipakita (sa ganitong halimbawa, ang teksto ay 'Lorem Ipsum').

Pagkatapos, sa CSS, inilagay mo ang .divider Ang klase ay nagtatakda ng ilang estilo. Nait-ayos mo ang laki ng font na 30 pixel, gumamit ng flex layout, at itinakda mo ang align-items: center; upang ilagay ang teksto sa gitna ng paghahati ng linya.

Pagkatapos, gamit mo ang panggagamit na ::before at ::after upang magdagdag ng mga dekorasyon sa parehong dulo ng paghahati ng linya. Ang dalawang panggagamit na ito ay nait-ayos flex: 1 upang sila ay kunin .divider Ang lahat ng espasyo sa elemento maliban sa teksto. Binagay mo din ang content: '' Upang matiyak na ang dalawang panggagamit na wala sa anumang nilalaman.

Pagkatapos, itaas ang panloob na padadpad, kulay ng lakas at labas na padadpad upang tukuyin ang estilo ng paghahati ng linya. Sa ganitong halimbawa, ang kulay ng paghahati ng linya ay pula at may ilang panloob na padadpad at labas na padadpad.