Hvordan tvinge en linjepause i et langt ord i en div

Det er tabeller og bokser opprettet gjennom DIV i HTML -dokumenter som inneholder tekstinformasjon inne i. Problemet oppstår når det er et stort ord med et stort antall tegn, og på grunn av dette strømmer teksten ut av beholderen som forsømmer å grensen til beholderen.

CSS Word-Wrap-egenskap som formaterer den skriftlige teksten automatisk ved å dele det lange ordet i deler når det er nødvendig. “Word-wrap”Eiendom flytter delene av ordet til neste linje i henhold til størrelsen på beholderen.

Tvinger en linjepause i et langt ord i en div

Bare legg til ordinnpakningsegenskapen med Break Word-verdien/attributtet i CSS-stilelementet som refererer til DIV.

Syntaks
Den nøyaktige syntaksen for å legge til ordinnpakningsegenskapen er som følger:

Word-Wrap: Break-Word;

Problem: Innhold renner over Div

La oss diskutere dette ved hjelp av et enkelt eksempel på en div som har teksten inni med et langt ord:

Ithout Word-Wrap: Break-Word Element

Linjebruddselementet i HTML formaterer den skrevne teksten automatisk ved å bryte det lange ordet med mange tegn i deler når det er nødvendig. For eksempel, hvis det er en veeeeeeeeeeeeeeeerrrrrrrrrrrrrrryyyyyyyyyyyy, langt ord

Dette vil vise følgende resultat i utgangen. Dette ser veldig problematisk ut da teksten er overfylt ut av div:

Løsning: Legge til "Word-wrap" -egenskap

Nå, hvis vi tar den samme DIV -beholderen med samme tekst inni som lagt til ovenfor i dette innlegget:

Med ordinnpakning: Break-Word Element

Linjebruddselementet i HTML formaterer den skrevne teksten automatisk ved å bryte det lange ordet med mange tegn i deler når det er nødvendig. For eksempel, hvis det er en veeeeeeeeeeeeeeeerrrrrrrrrrrrrrryyyyyyyyyyyy, langt ord

Nå, i CSS-stilelementet, er det bare påkrevd å referere til DIV-klassen, ID eller attributt der det lange problematiske ordet er skrevet, og deretter bare legge til ord-pakkegenskapen:

.klasse2
Word-Wrap: Break-Word;

Dette vil være utgangen som genereres gjennom ovennevnte kodebit. Nå ser dette presentabelt ut fordi ordinnpakningsegenskapen delte ut teksttegnene i flere linjer i stedet for å overfylte ut av beholderen:

Slik kan vi tvinge en linjepause i et ord som har mange karakterer.

Konklusjon

For å tvinge en linjeskift i et langt ord i en div på en slik måte at det flytter delene av ordene til de neste linjene i henhold til størrelsen på beholderen, er det en CSS-ordinnpakningsegenskap med verdien Break-Word. I CSS-stilelementet er det bare påkrevd å legge til en velger for å henvise til DIV-beholderen der ordet opprettes og deretter skrive ordinnpakningseiendommen.