Πώς να δημιουργήσετε: διάσταση κειμένου

Πώς να δημιουργήσετε μια ανταποκρίσιμη διάσταση κειμένου

Πρώτη Βήμα - Προσθήκη HTML:

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

Δεύτερη Βήμα - Προσθήκη CSS:

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

δοκιμάστε το個人τικά

Επεξήγηση παραδείγματος:

Αυτό το παράδειγμα διδάσκει πώς να δημιουργήσετε μια διάσταση κειμένου χρησιμοποιώντας το CSS. Συγκεκριμένα, χρησιμοποιείται η σύνθεση HTML και CSS για να επιτευχθεί αυτό το αποτέλεσμα.

πρώτα, πρέπει να προσθέσετε ένα στοιχείο div με την κλάση "divider" στο HTML και να τοποθετήσετε μέσα το κείμενο που θέλετε να εμφανιστεί (στον παρόντα παράδειγμα, το κείμενο είναι "Lorem Ipsum").

τότε, στον CSS, ρυθμίσατε .divider η ρύθμιση της κλάσης έχει οριστεί με ορισμένα στυλ. Ρυθμίσατε το μέγεθος του γραμματοσειράς σε 30 pixel, χρησιμοποιήσατε τη διαμόρφωση flex και ορίσατε align-items: center; για να κρατήσετε το κείμενο στο κέντρο της διάστασης.

τότε, χρησιμοποιήσατε τις ψευδοεγχειρήσεις ::before και ::after για να προσθέσετε στοιχεία διακόσμησης στα δύο πλάγια της διάστασης. Και οι δύο ψευδοεγχειρήσεις έχουν ρυθμιστεί flex: 1 για να καταλαμβάνουν .divider όλο το χώρο του στοιχείου εκτός κειμένου. Επίσης, ρυθμίσατε content: '' να διασφαλίσετε ότι αυτές οι ψευδοεγχειρήσεις είναι κενές και δεν περιέχουν κανένα περιεχόμενο.

τότε, ρυθμίστε το εσωτερικό περιθώριο, το χρώμα φόντου και το εξωτερικό περιθώριο για να ορίσετε το στυλ της διάστασης. Σε αυτό το παράδειγμα, το χρώμα της διάστασης είναι κόκκινο και έχει μερικά εσωτερικά και εξωτερικά περιθώρια.