0

I have these div's on my site and they contain text which is sometimes too wide to fit the h4 elements within.

"The Presentation" spilling out of its' container

Right now I've applied these styles to this particular h4:

h4 {
  font: {
    family: "Nexa";
    size: 3.25em;
    weight: 600;
  }
  line-height: 135%;
  letter-spacing: 0.15rem;
  text-transform: uppercase;
}

I'm using the em measurement to change its' size. Is there a more appropriate measurement for this situation?

EDIT EXPLAINING HOW MY QUESTION IS NOT A DUPLICATE: Using the viewport unit of measurement will not help in my situation considering my styles are interdependent. I've tried it to confirm.

IIllIIll
  • 504
  • 8
  • 25
  • 1
    a jsfiddle would be better which would showcase your problem and allow us to work with it to give a solution. – Amit Joki Jan 09 '16 at 14:51
  • It isn't that complicated . I'd have to include the whole site because my CSS is interdependent which is overboard for the nature of my problem. – IIllIIll Jan 09 '16 at 14:52
  • well, then an uncomplicated answer would be to debug and set the size which fits in. – Amit Joki Jan 09 '16 at 14:57
  • Is it a bad idea to add a class on that one element and change its' `font-size` to make it fit? I could add a class if the title text matches an item in an array or something and change its' size. – IIllIIll Jan 09 '16 at 15:00
  • Possible duplicate of [Font scaling based on width of container](http://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container) – DustinPianalto Jan 09 '16 at 15:02
  • @DustinPianalto Viewport scaling definitely won't help in my situation. **This is not a duplicate.** – IIllIIll Jan 09 '16 at 15:10
  • Why won't viewport scaling work in your case? – DustinPianalto Jan 09 '16 at 16:48
  • I don't know but just applying it didn't work. – IIllIIll Jan 09 '16 at 16:57

2 Answers2

0

You can try out this:

h4 {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

And you need to set the language in a ancestral HTML element:

<article attr1="valor" attr2="valor" ... lang="en">

or

<html attr1="valor" attr2="valor" ... lang="en">

See more: Css Tricks

Facol
  • 1
  • 2
0

I've decided to use an if ... in conditional to check an array of problematic titles. This array contains titles that don't fit the container properly. If the site is in the array of those titles I apply a class called smaller to the h4 containing the problematic title. I don't know if this was the best approach but it's solved the problem. Thanks to everyone who offered help!

IIllIIll
  • 504
  • 8
  • 25