0

Is there a css property that will text like --TestCanvas-min-width from breaking on the -? I've tried word-break: keep-all, but it still breaks on the dash.

Ole
  • 41,793
  • 59
  • 191
  • 359
  • https://stackoverflow.com/questions/8753296/how-to-prevent-line-break-at-hyphens-on-all-browsers – Taylor A. Leach Jun 15 '18 at 22:56
  • Perhaps substitute the dash for a [non-breaking hyphen](https://stackoverflow.com/a/7691604/2418006) – OneManBand Jun 15 '18 at 22:57
  • Is it a dash or two hyphens? [google](https://www.google.ca/search?safe=off&ei=PEYkW678C9KS0PEP4oij0A0&q=dash+vs+hyphen&oq=dash+vs&gs_l=psy-ab.3.0.0l10.2354.3698.0.5060.7.7.0.0.0.0.72.464.7.7.0..2..0...1.1.64.psy-ab..0.7.463...0i131k1j35i39k1j0i67k1j0i131i67k1.0.ZHnvGUDb5S8) – wazz Jun 15 '18 at 23:05
  • It breaks on the `-` ... you should be able to see it in this css test https://superflycss.github.io/component-test/target/test/html/ It's the third test ... resize the viewport to see the breaks ... – Ole Jun 16 '18 at 00:58

1 Answers1

2

You can try something like white-space: nowrap;.

you can read more about it here

so you would add <span> and apply that to it.

.my--div {
  width: 150px;
  border: 1px solid;
}

.my--span {
  white-space: nowrap;
  color: red;
}
<div class="my--div">--TestCanvas-min-width--TestCanvas-min-width--TestCanvas-min-width<span class="my--span">--TestCanvas-min-width--</span>TestCanvas-min-width</div>
Adam
  • 1,385
  • 1
  • 10
  • 23