nobr (or the equivalent CSS) seems to work for this case already? (At least, in Chrome it does.) Is this a Chrome spec violation?

@tabatkins I tried this with <nobr> in Chrome as well before reporting the issue via Twitter.

Here is a similar example to my original example which uses <nobr>:
https://codepen.io/brandonmcconnell/pen/xxQZMZG/40fa8f6cfefe11ad24a200af0d3a4028

The div still wraps without the contents to the left of the <nobr>

Right, marked up like that it just suppressed a break between the two icons. If you want to suppress a break between the icons and the preceding word you need to include the preceding word in the nobr as well.

@tabatkins Ah, so when dealing with markup generated by JS, would we need to do some sort of splitting abstraction like this? (REPL)

<script>
	const allText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sollicitudin magna a iaculis maximus. Proin eleifend ligula enim, suscipit semper est condimentum ac. Donec semper scelerisque neque sed ultricies. Aliquam ut scelerisque orci. Nullam et orci nec massa gravida porttitor. Maecenas dui dui, eleifend at fringilla quis, convallis eget elit. Mauris volutpat felis a magna finibus, quis venenatis ex laoreet. Nulla ac nisi urna. Mauris ut sapien sit amet mi sollicitudin mattis. Nulla finibus efficitur placerat. Morbi fringilla aliquet quam non posuere. Nullam sodales nisl ut ipsum varius, sit amet iaculis elit fringilla. Phasellus sit amet sem auctor ex ullamcorper.';
	
	const words = allText.split(' ');
	const lastWord = words.slice(-1)[0];
	const textBeforeNoBreak = words.slice(0, -1).join(' ');
</script>

{textBeforeNoBreak}
<nobr>
	{lastWord}
	<div class="attachment">
		<div class="icon">🌴</div>
		<div class="icon">🍫</div>
	</div>
</nobr>

<style>
	.attachment {
		display: inline-block;
		white-space: nowrap;
		padding-left: 1ch;
	}

	.icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		aspect-ratio: 1;
		background: #eee;
		border-radius: 50%;
	}
</style>

It'd be great to not have to reply on JS to attach some elements like this to the text to ensure it doesn't get orphaned, similarly to how we can currently can do the same for text using  

@tabatkins Making <nobr> work doesn't solve the problem of “these unicode characters that are explicitly supposed to control breaking aren't”. It might solve some use cases for it, but it doesn't change the fact that our behavior is stupid.

@brandonmcconnell The correct answer to that use case is to use wrap-before: avoid on the icon. But you'll have to convince implementers to implement it first. https://www.w3.org/TR/css-text-4/#wrap-before

The CSS Working Group just discussed [css-text-3] Reconsider atomic inlines overriding GL/WJ classes, and agreed to the following:

• RESOLVED: accept proposal