Question

根据网页设计，使用的图像代替＆＃34; O＆＃34;信（有时）。
问题：当窗口调整大小时，有时候图像后面的一部分字会转到新行期望的行为：如果不合适，整个单词应该转到新行是的我可以用<span>标记用css规则white-space: nowrap包装这些单词，但它不是一个理想的解决方案，因为客户希望能够在Wordpress可视化编辑器中编辑它。
关于如何防止图像内部单词破坏的任何想法？
https://jsfiddle.net/jas1rmwx/ - 调整窗口大小以查看问题。

＆＃13;

p {
  font-size: 40px;
  font-weight: bold;
  font-family: sans-serif;
}

img {
  vertical-align: middle;
}

＆＃13;

<p>This is the looooooo<img src="https://i.imgur.com/EgNYUyy.png" />ooong woooooooooooo<img src="https://i.imgur.com/EgNYUyy.png" />ooord</p>

＆＃13;

Answer 1

看起来你需要nobr标签：

＆＃13;

p {
  font-size: 40px;
  font-weight: bold;
  font-family: sans-serif;
}

img {
  vertical-align: middle;
}

＆＃13;

<p>This is the <nobr>looooooo<img src="https://i.imgur.com/EgNYUyy.png" />ooong</nobr> <nobr>woooooooooooo<img src="https://i.imgur.com/EgNYUyy.png" />ooord</nobr></p>

＆＃13;

https://jsfiddle.net/jas1rmwx/1/

我不确定移动浏览器是如何支持的。

我没有看到任何其他文字格式的解决方案。您也可以将单词设为inline-block并向左浮动

更新：内联块解决方案：

＆＃13;

div {
  font-size: 40px;
  font-weight: bold;
  font-family: sans-serif;
}
img {
  vertical-align: middle;
}
.nobr {
  display: inline-block;
}

＆＃13;

<div>This is the 
<div class="nobr">
 looooooo<img src="https://i.imgur.com/EgNYUyy.png" />ooong</div>
<div class="nobr">woooooooooooo<img src="https://i.imgur.com/EgNYUyy.png" />ooord</div></div>

＆＃13;

https://jsfiddle.net/jas1rmwx/8/

当单词中间有图像时，防止单词破坏

1 个答案: