Cant disable hyphens?!

[Sylvant]

Im on the Javascript calculator project and im trying to make my words(formula) not break on hyphens, but hyphens property seem to have no effect. If there is - sign present, the formula breaks there even with hyphens: none . I am using overflow-wrap: break-word .
The example project hasnt such issue and no props in the CSS suggests that, unless its part of the imported fonts

[ilenia]

You have not given enough infos to understand what’s going on.
When you ahev a question about a piece of code, the best way to ask the questioin is to also provide such code, please give the link to your project

[Sylvant]

here is a mock code:

CSS:

#test {
  overflow-wrap: break-word;
  hyphens: none;
  width: 80px;
}

HTML:

<p id='test'>I-dont-want-this-string-to-break-based-on-hyphens</p>

Outcome:

I-dont-want-this-
string-to-break-
based-on-hyphens

Desired outcome:

I-dont-want-this-str
ing-to-break-based-o
n-hyphens

[MatchaCrisp]

the hyphens property does not deal with how the browser deals with hyphens already present in the content. Instead, it tells the browser if it can wrap text by breaking up and hyphenating words. See MDN documentation on the hyphens property.

For the behavior you described, try using the non-breaking hyphen ‑. Or set up a class with white-space:nowrap; to use when you encounter a segment of text you do not want to wrap.

<style>
.no_wrap {
   white-space:nowrap;
}
</style>

<p>I really really do not want to 
   <span class="no_wrap">wrap-this-text</span> 
   but other words are okay</p>

[Sylvant]

thanks for the clarification on the hyphens characteristics. I did check documentations sources on it, but didnt make enough sense and i couldnt tell in the examples if hyphens were preemtivly part of the text or browser rendered.
I will try to use the non-breaking hyphen you suggested.
My issue is, im building the JS calculator project and the browser treats the subtraction sign as hyphenation