Is there a way to turn every syllable of a specific phrase into clickable buttons while maintaining regular text wrapping behavior?
For reference, in the first image each syllable is plain text, in the second they're wrapped in <span>, and in the third, they're enclosed by <button>:
https://i.sstatic.net/AZAwo.png
body {
background-color: #222;
color: #fff;
}
div {
background-color: #444;
margin-bottom: .5em;
padding: 1em;
width: 180px;
}
div,
button {
font-family: sans-serif;
font-size: 20px;
}
button {
background-color: transparent;
border: none;
color: orange;
margin: 0;
padding: 0;
}<div>
Hippopotamus amphibius
</div>
<div>
<span>Hip</span><span>po</span><span>pot</span><span>a</span><span>mus</span> <span>am</span><span>phi</span><span>bius</span>
</div>
<div>
<button>Hip</button><button>po</button><button>pot</button><button>a</button><button>mus</button> <button>am</button><button>phi</button><button>bius</button>
</div>I want the <button> version to behave like the first two. While I could group unbreakable segments together in containers, I'm looking for a way to achieve this without altering the text structure due to the large amount of text.
Can this be achieved using CSS?