css如何让⽂字不换⾏显⽰？
在中，可以通过white-space属性来实现⽂字不换⾏显⽰；只要将white-space属性的值为nowrap就可强制⽂字不换⾏。white-space属性指定元素内的空⽩怎样处理。它有以下属性值：
normal：默认。空⽩会被忽略。
pre：空⽩会被保留。其⾏为⽅式类似  中的 <pre> 标签。
nowrap：⽂本不会换⾏，⽂本会在在同⼀⾏上继续，直到遇到 <br> 标签为⽌。
pre-wrap：保留空⽩符序列，但是正常地进⾏换⾏。
pre-line：合并空⽩符序列，但是保留换⾏符。
⽰例：
<!DOCTYPE >
<>
<head>
<meta charset="UTF-8">
css特效文字
<style type="text/">
p {
width: 400px;
height: 50px;
border: 1px solid red;
}
.nowrap{
white-space: nowrap;
}
</style>
</head>
<body>
<p>普通⽂本
这是⼀些⽂本。这是⼀些⽂本。这是⼀些⽂本。
</p>
<p>强制⽂字不换⾏
这是⼀些⽂本。这是⼀些⽂本。这是⼀些⽂本。
</p>
</body>
</>
效果图：
white-space属性可和overflow属性、text-overflow属性⼀起使⽤，使⽤⽂字不换⾏、超出部分隐藏并显⽰为省略号、⽰例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
p {
width: 400px;
height: 50px;
border: 1px solid red;
}
.nowrap{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>
</head>
<body>
<p>普通⽂本
这是⼀些⽂本。这是⼀些⽂本。这是⼀些⽂本。  </p>
<p>强制⽂字不换⾏
这是⼀些⽂本。这是⼀些⽂本。这是⼀些⽂本。  </p>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。