使用 CSS 禁用换行符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16383483/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable line breaks using CSS
提问by Joan Botella
I have a canvas element inside a div element. The canvas size can change, and I want it vertical centered. I'm using this CSS approach:
我在 div 元素中有一个画布元素。画布大小可以改变，我希望它垂直居中。我正在使用这种 CSS 方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vertical Centering</title>
<style>
html,
body{
height:100%;
width:100%;
margin:0;
padding:0;
}
#container{
width:100%;
height:100%;
text-align:center;
font-size:0;
background:#aae;
}
#container:before{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
canvas{
width:400px;
height:300px;
display:inline-block;
vertical-align:middle;
background:#fff;
}
</style>
</head>
<body>
<div id="container">
<canvas></canvas>
</div>
</body>
</html>
You can see it working on this fiddle: http://jsfiddle.net/8FPxN/
你可以看到它在这个小提琴上工作：http: //jsfiddle.net/8FPxN/
This code works great for me, until the browser resizes under the canvas width. The virtual element defined by the :beforeselector stands on the first line, and the canvas falls to the second line. I'm trying to keep them sticked, avoiding the line break, and showing scroll bars when needed. Adding the overflow:autorule to the container shows the scroll bars, but the line keeps breaking.
这段代码对我很有用，直到浏览器在画布宽度下调整大小。:before选择器定义的虚拟元素站在第一行，画布落到第二行。我试图让它们粘在一起，避免换行，并在需要时显示滚动条。将overflow:auto规则添加到容器中会显示滚动条，但该行不断中断。
The canvas size can change, so the top:50%; margin-top:- ($canvas_height / 2);approach is not suitable for this. Well, it can be, but I prefer not to control the margin-topusing JavaScript. Just CSS would be great.
画布大小可以更改，因此该top:50%; margin-top:- ($canvas_height / 2);方法不适合于此。嗯，它可以，但我不想控制margin-top使用 JavaScript。只是 CSS 会很棒。
Any ideas? Thanks!
有任何想法吗？谢谢！
回答by David says reinstate Monica
It seems (from limited testing) that adding white-space: nowrap;works:
似乎（从有限的测试中）添加white-space: nowrap;工作：
#container{
width:100%;
height:100%;
text-align:center;
font-size:0;
background:#aae;
white-space: nowrap;
}
回答by Timidfriendly
Adding white-space:nowrap should do the trick. http://jsfiddle.net/David_Knowles/aEvG5/
添加 white-space:nowrap 应该可以解决问题。http://jsfiddle.net/David_Knowles/aEvG5/
#container{
width:100%;
height:100%;
text-align:center;
font-size:0;
white-space:nowrap;
}
EDIT: correct fiddle
编辑：正确的小提琴
