Πώς να λέξης-διάλειμμα για μια εξόρμηση;

ψήφοι
60

Λαμβάνοντας υπόψη ένα σχετικά απλό CSS:

div {
  width: 150px;
}
<div>
  12333-2333-233-23339392-332332323
</div>

Πώς μπορώ να το κάνω έτσι ώστε το κορδόνι παραμένει περιορισμένη στην widthαπό 150 , και απλά αναδιπλώνεται σε μια νέα γραμμή για την παύλα;

Δημοσιεύθηκε 04/08/2008 στις 01:17
πηγή χρήστη
Σε άλλες γλώσσες...                            


11 απαντήσεις

ψήφοι
63

Αντικαταστήστε ενωτικά σας με αυτό:

&shy;

Είναι ονομάζεται «μαλακό» παύλα.

div {
  width: 150px;
}
<div>
  12333&shy;2333&shy;233&shy;23339392&shy;332332323
</div>

Απαντήθηκε 04/08/2008 στις 01:25
πηγή χρήστη

ψήφοι
31

Σε όλα τα σύγχρονα προγράμματα περιήγησης * (και σε ορισμένες παλαιότερα προγράμματα περιήγησης , πάρα πολύ), το <wbr>στοιχείο είναι το τέλειο εργαλείο για την παροχή της ευκαιρίας για να σπάσει μεγάλες λέξεις σε συγκεκριμένα σημεία.

Για να παραθέσω ένα απόσπασμα από αυτό το σύνδεσμο:

Ο Λόγος Break ευκαιρία ( <wbr>το στοιχείο HTML) αντιπροσωπεύει μια θέση μέσα στο κείμενο, όπου το πρόγραμμα περιήγησης μπορεί προαιρετικά να σπάσει μια γραμμή, αν και κανόνες line-σπάσιμο της δεν θα δημιουργήσει διαφορετικά ένα διάλειμμα σε αυτή τη θέση.

Εδώ είναι το πώς θα μπορούσε να χρησιμοποιηθεί στο παράδειγμα του ΕΠ (ή το δείτε σε δράση σε JSFiddle ):

<div style="width: 150px;">
  12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>

* Το έχω δοκιμαστεί σε IE9, IE10, και τις τελευταίες εκδόσεις του Chrome, Firefox και Opera και Safari.

div {
  width: 150px;
}
<div>
  12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>

Απαντήθηκε 30/01/2012 στις 07:53
πηγή χρήστη

ψήφοι
17

Στο πλαίσιο του CSS3, δεν υποστηρίζεται ακόμα πλήρως, αλλά μπορείτε να βρείτε πληροφορίες για λέξη-περιτύλιγμα εδώ . Μια άλλη επιλογή είναι η ετικέτα WBR, και ντροπαλός ;, και & # 8203? κανένα από τα οποία υποστηρίζονται πλήρως, είτε.

Απαντήθηκε 04/08/2008 στις 01:25
πηγή χρήστη

ψήφοι
8

Στη συγκεκριμένη περίπτωση (όπου εγχόρδων σας πρόκειται να περιέχει ενωτικά) Θα μετατρέψει το κείμενο σε αυτή την πλευρά του διακομιστή:

<div style="width:150px;">
  <span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span>
</div>
Απαντήθηκε 05/12/2008 στις 13:36
πηγή χρήστη

ψήφοι
8

παράδειγμα σας λειτουργεί όπως αναμένεται στο Google Chrome, Safari (Windows), και IE8. Το κείμενο διαλείμματα έξω από το κουτί 150px στο Firefox 3 και Opera 9.5.

Επιπλέον, &shy;δεν θα λειτουργήσει για παράδειγμα σας, καθώς είτε θα:

  • λειτουργεί όταν λέξη-σπάσιμο, αλλά όταν δεν είναι λέξη-σπάζοντας δεν εμφανίζουν κανένα ενωτικά, ή

  • εργασία, όταν δεν λέξη-σπάσιμο, αλλά εμφάνισης δύο παύλες κατά λέξη-σπάσιμο, δεδομένου ότι προσθέτει μια παύλα για ένα διάλειμμα.

Απαντήθηκε 16/09/2008 στις 00:15
πηγή χρήστη

ψήφοι
7

Ανάλογα με το τι θέλετε να δείτε ακριβώς, μπορείτε να χρησιμοποιήσετε ένα συνδυασμό hyphen, soft hyphenκαι / ή zero width space.

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

Έτσι, αν ο κωδικός σας είναι κάτι σαν:

111111&shy;222222&shy;-333333&#8203;444444-&#8203;555555

τότε ο browser σας θα δείξει αυτό χωρίς λέξη-break:

1111112222222-33333334444444-5555555

και αυτό θα είναι κάθε πιθανή λέξη-break:

111111-
222222-
-333.333
444444-
555555

Απλά πάρτε την επιλογή που χρειάζεστε. Στην περίπτωσή σας, μπορεί να είναι αυτό μεταξύ 4s και 5s.

Απαντήθηκε 16/09/2010 στις 10:04
πηγή χρήστη

ψήφοι
1

Μπορείτε επίσης να χρησιμοποιήσετε:

word-break:break-all;

πρώην.

<div style='width:10px'>ababababababbabaabababababababbabababa</div>

παραγωγή:

abababababa
ababababbba
abbabbababa
ababb

λέξη-διάλειμμα είναι να σπάσει όλα τη λέξη ή γραμμή ακόμα και αν δεν χώρου στην πρόταση που δεν feets σε παρέχονται πλάτος ή το ύψος. παξιμάδι γι 'αυτό θα πρέπει να παρέχουν ένα πλάτος ή το ύψος.

Απαντήθηκε 27/08/2015 στις 12:40
πηγή χρήστη

ψήφοι
0

Μπορείτε να χρησιμοποιήσετε 0 πλάτους διάστημα μετά το χαρακτήρα παύλα:

div {
  width: 150px;
}
<div>
  12333-&#8203;2333-&#8203;233-&#8203;23339392-&#8203;332332323
</div>

αν Θέλετε αλλαγή γραμμής πριν παύλα χρησιμοποιούν &#8203;-αντ 'αυτού.

Απαντήθηκε 13/09/2018 στις 10:21
πηγή χρήστη

ψήφοι
0

Η ελπίδα αυτή μπορεί να βοηθήσει

χρήση <br>(σπάσιμο) της ετικέτας όπου θέλετε να σπάσει τη γραμμή.

Απαντήθηκε 31/08/2017 στις 10:53
πηγή χρήστη

ψήφοι
0

Αντί να -μπορείτε να χρησιμοποιήσετε &hyphen;ή \u2010.

Επίσης, βεβαιωθείτε ότι η ενωτικά ακίνητο css ήταν να μην οριστεί σε κανένα (Η προεπιλεγμένη τιμή είναι χειροκίνητη ).

<wbr>δεν υποστηρίζεται από τον Internet Explorer .

Απαντήθηκε 14/05/2015 στις 04:29
πηγή χρήστη

ψήφοι
0

Το ενωτικό χωρίς διακοπή λειτουργεί καλά.

HTML Οντότητα (δεκαδικό)

&#8209;
Απαντήθηκε 21/03/2014 στις 23:09
πηγή χρήστη

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more