HTMLでどうしても改行するならここにして！

スマホ画面だと短いタイトルでも折り返してる時がある

しかもこの折り返し方は嫌だ・・・「i」と「～」の間で折れて欲しいので、間に<wbr>タグを入れたのだが<wbr>タグが効かない？！

じゃ、折り返して欲しくない部分をくるむ方法で以下

<div id="site-title">
    <h1>Tan-Deki<span class="no-break">～耽溺～</span></h1>
</div><!-- /site-title -->

CSS

#site-title h1 {
    color: #663366;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", serif;
    font-size: 2.5rem;
    line-height: 1.4;
    text-shadow: 2px  2px 3px RGB(222, 250, 222),
            -2px  2px 3px RGB(222, 250, 222),
             2px -2px 3px RGB(222, 250, 222),
            -2px -2px 3px RGB(222, 250, 222);
}

.no-break {
  white-space: nowrap;
}

上手く行った