Πώς να εμφανίσετε μια αλλαγή γραμμής χωρίς την ετικέτα
σε HTML

Για να δημιουργήσετε μια αλλαγή γραμμής σε HTML χωρίς την ετικέτα <br>, ορίστε την ιδιότητα white-space του κοντέινερ κειμένου σε pre-wrap. Για παράδειγμα:

HTML

<div id="box">
  Lorem    Ipsum
  Lorem Ipsum
  Lorem   Ipsum
</div>

CSS

#box {
  white-space: pre-wrap;
}

Η ρύθμιση line-space σε pre διατηρεί τις αλλαγές γραμμής και τις ακολουθίες κενών διαστημάτων στο κείμενο του στοιχείου. Έτσι τα 4 κενά μεταξύ των λέξεων της πρώτης γραμμής εμφανίζονται στην έξοδο μαζί με την αλλαγή γραμμής.

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

white-space: pre-wrap με JavaScript

Όταν το white-space έχει οριστεί σε pre-wrap, μπορείτε επίσης να εμφανίσετε μια αλλαγή γραμμής συμπεριλαμβάνοντας τον χαρακτήρα \n σε μια συμβολοσειρά που έχει εκχωρηθεί στην ιδιότητα innerHTML ή innerText.

JavaScript

const box = document.getElementById('box');

box.innerText = 'JavaScript    tutorial at \n Coding Beauty';

Χωρίς white-space: pre-wrap, αυτό θα ήταν το αποτέλεσμα:

Διακοπή γραμμής με white-space: pre

Μπορούμε επίσης να χρησιμοποιήσουμε την ιδιότητα white-space σε pre για να εμφανίσουμε αλλαγές γραμμής χωρίς την ετικέτα <br>. Το pre λειτουργεί πολύ όπως το pre-wrap, με τη διαφορά ότι το κείμενο δεν θα αναδιπλώνεται πλέον αυτόματα σε pre-wrap ή στην προεπιλεγμένη τιμή normal.

Για παράδειγμα, ας μειώσουμε το πλάτος του κοντέινερ #box σε 200px, για να παρατηρήσουμε τη συμπεριφορά υπερχείλισης με pre.

HTML

<div id="box">
  JavaScript     at     Coding Beauty
  HTML at Coding Beauty
  CSS   at   Coding Beauty
</div>

CSS

#box {
  white-space: pre;
  background-color: #e0e0e0;
  width: 200px;
}

Αν το pre ήταν pre-wrap σε αυτό το παράδειγμα:

Η συμπεριφορά με το pre είναι η ίδια όταν ορίζετε την ιδιότητα innerHTML ή innerText του στοιχείου σε μια συμβολοσειρά χρησιμοποιώντας JavaScript.

Διακοπή γραμμής με white-space: pre-line

Σε περιπτώσεις όπου θέλετε να αγνοούνται επιπλέον κενά, αλλά να εμφανίζονται αλλαγές γραμμής στην έξοδο, η ρύθμιση white-space σε pre-line θα είναι χρήσιμη:

Δείτε πώς θα ήταν το width του 300px και το white-space του pre-line:

HTML

<div id="box">
  JavaScript     at     Coding Beauty
  HTML at Coding Beauty
  CSS   at   Coding Beauty
</div>

CSS

#box {
  white-space: pre-line;
  background-color: #e0e0e0;
  width: 300px;
}

Σε πλάτος 200px:

Όπως οι προηγούμενες δύο πιθανές τιμές white-space, το pre-line λειτουργεί με τον ίδιο τρόπο όταν ορίζετε την ιδιότητα innerHTML ή innerText του στοιχείου σε μια συμβολοσειρά χρησιμοποιώντας JavaScript.

Αρχικά δημοσιεύτηκε στο codingbeautydev.com

Κάθε τρελό πράγμα που κάνει η JavaScript

Ένας συναρπαστικός οδηγός για τις λεπτές προειδοποιήσεις και τα λιγότερο γνωστά μέρη της JavaScript.

Εγγραφείτε και λάβετε ένα δωρεάν αντίγραφο αμέσως.