JSFiddle - React, Tailwind, and code Playground

HTML

<div id="testDiv" class="break">
  Staphylococcus lugdunensis (Coagulase-Negative)
  Staphylococcus lugdunensis (Coagulase-Positive)
</div>
<button onclick="test()">Test!</button>

CSS

.break {
   line-height: 1.3;
  font-size: 16px;
  width: 180px;
  background-color: #eee;
  padding: 10px;
  word-wrap: break-word; 
  
}

.hyphenated {
   white-space: nowrap;
}

JavaScript

// testing function

function test() {	
  $("#testDiv").html(testfn($("#testDiv").text()));
}

function testfn(text) {
  var hyphenated = text.match(/(?:\w+-)+\w+/g);
  if (hyphenated) {
    var hypenathedWord = "";
    for (r = 0; r < hyphenated.length; r++) {
      hypenathedWord = hyphenated[r];      
      text = text.replace(hypenathedWord, "<span class='hyphenated'>" +  hypenathedWord + "</span>");
    }
  }
  return text;
}