Member Avatar for Serge_1

Please can anyone help re-arrange text that are spit apart on browser.
What css property can be use to bring the text align as normal.

  • 2 Contributors
  • 2 Replies
  • 185 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by gentlemedia

Dani AI

Generated

Quick diagnostic and fixes for the “text spit apart” issue reported by . is right to name leading and tracking as places to look; the checklist below adds the other common causes and a small CSS reset that often fixes the symptom across browsers.

  • Inspect computed styles (DevTools): check letter-spacing, word-spacing, line-height, text-align, white-space, font-family and any inherited rules from a framework (Bootstrap) or reset stylesheet.
  • Look for text-align: justify on the container — full justification expands inter-word spacing; enabling hyphenation or switching to left alignment usually removes the large gaps.
  • Search the HTML for non-breaking or invisible spaces (e.g.  , U+00A0, zero-width spaces). Copy/paste from Word or PDFs can introduce these.
  • Confirm the webfont is loading: a fallback font with different metrics will change spacing. Test by forcing a known system font to see whether spacing returns to normal.
  • Kerning and advanced font features can matter: font-kerning, font-feature-settings, and text-rendering affect letter pairing in some browsers. Browser support varies, so prefer simple fixes first.
  • Per-letter control requires wrapping letters (or using a small script); avoid that unless fine-grain effects are needed.

A compact reset to try on the affected element:

.problem-text {
  letter-spacing: normal;
  word-spacing: normal;
  line-height: 1.35;
  font-kerning: normal;
  font-feature-settings: "kern" 1;
  hyphens: auto;
  text-align: left;
}

When gaps persist after these checks, isolate the case to a minimal HTML/CSS snippet to reveal hidden characters or inheritance. The steps above cover the typical causes when text looks “split apart” across browsers.

Recommended Answers

All 2 Replies

Member Avatar for gentlemedia

Leading can be set with the line-height property and for kerning and tracking you have letter-spacing. But the letter you can't use on individual letters. For that you have to use some javascript such as lettering.js that wraps each letter (of your headings and sub headings of course) in a span tag. It can also be used in combination with kern.js

Edited by gentlemedia
Member Avatar for gentlemedia

But the letter

I meant 'the latter' :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.