Question

以下是源代码：

<html>
<head>
<meta content="width=472" name="viewport">
<style type="text/css">
img {max-width:100%;} div { margin-top: 0;margin-bottom: 0;font-family:Arial, sans-serif;}p{margin-top: 0;margin-bottom: 0;word-wrap:break-word;}table{border-collapse: collapse;}td{word-wrap:break-word;font-family:Arial;vertical-align:top;}
</style>
<style media="screen" type="text/css">
.bumpedFont16 { font-size:1.6em; }.bumpedFont20 { font-size:2.0em; }
</style>
</head>
<body>
<div style="width:472;background-color:#FFFFFF; position:relative; overflow:hidden;word-wrap:break-word;min-height:830px; padding-left:20;padding-right:20;padding-top:20;padding-bottom:20;">
<style type="text/css">
.s0 {font-size: 17;font-family: Courier;color: rgb(0,0,255);}
.s1 {font-size: 17;font-family: Courier;color: rgb(163,21,21);}
.s2 {direction:ltr;text-align: left;}
</style>
<p class="s2">
<span class="s0">
<span class="bumpedFont16">Testing.</span>
</span>
<span class="s1">
<span class="bumpedFont16">This is a Testing well.</span>
</span>
</p>
</div>
</body>
</html>

这就是HTML代码的样子： enter image description here

这就是我想要的：

enter image description here

如何编写通用的javascript / css以避免文本换行到两行？谢谢。

Answer 1

您可以将{strong> white-space 属性与nowrap值一起使用：

与正常情况一样折叠空格，但会抑制换行符（文本包装）在文本中。

代表您的段落：

p.s2 {
    white-space: nowrap;
}

此外，我建议您使用外部CSS代替多个内部<style> CSS。

<强> Fiddle Demo

Answer 2

换行没有异常;这是正常的包装。这是因为你为一个元素设置了一个固定的宽度，并且那里的内容在没有包装的情况下不适合你的CSS设置。

因此，您需要决定是删除还是增加宽度设置，减小字体大小，还是强制将内容保留在同一行（例如@Felix建议的方式），即使这意味着它会溢出元素。

由于HTML中的字体大小，修复了异常换行符？

2 个答案: