HTML布局中div旁带空格文本如何按指定规则控制换行

• 现有HTML代码运行时，文本very long text出现非预期换行
• 目标效果：第一行仅显示第一个单词very，剩余所有单词显示在第二行
• 约束要求：代码中用于维持块间间距的多个<br>标签为后续内容布局必需，不可删除
• 原始问题代码：

<div style='padding:12'>
<div style='background-color:red;display:inline-block;height:2.5rem;width:2.5rem;float:left;'>
<span style='vertical-align:middle;float:left;color:black;font-weight:bold;margin-left:20%;margin-top:15%'>7</span><div style='color:black;margin-left:140%;margin-top:3%;vertical-align:middle;width:50%'>very long text</div></div><br><br><br><br>

异常换行原因：文本容器设置了width:50%，实际宽度仅为父级红色方块宽度的一半，容器宽度远小于文本总长度，浏览器默认的自动换行规则会在空格位置触发折行，因此出现不符合预期的拆分。

不需要改动原有浮动布局结构，不需要删除任何<br>标签，仅需做4处微调即可实现目标效果：

• 给文本容器添加white-space: nowrap样式，禁止浏览器在空格位置自动折行，避免随机换行问题
• 删除文本容器原有过窄的width:50%设置，让容器宽度自适应文本内容
• 在第一个单词very后插入<br>标签，强制在指定位置折行，精准实现“第一行仅显示第一个单词、剩余内容在第二行”的效果
• 补全padding:12缺失的长度单位，改为padding:12px，避免不同浏览器下的样式解析异常

修改后的完整代码：

<div style='padding:12px'>
<div style='background-color:red;display:inline-block;height:2.5rem;width:2.5rem;float:left;'>
<span style='vertical-align:middle;float:left;color:black;font-weight:bold;margin-left:20%;margin-top:15%'>7</span><div style='color:black;margin-left:140%;margin-top:3%;vertical-align:middle;white-space:nowrap;'>very<br>long text</div></div><br><br><br><br>

内容的提问来源于stack exchange，提问作者C Sharper