white-space属性指定元素内的空白怎样处理。
语法:
white-space : normal | pre | nowrap | pre-wrap | pre-line;
属性值:
normal:默认。空白会被浏览器忽略。
pre:空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap:文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap:保留空白符序列,但是正常地进行换行。
pre-line:合并空白符序列,但是保留换行符。
说明:
white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容
通常我们使用white-space:nowrap强制文本文字内容不换行,在对象内一行显示完所有文字内容。
示例:
<!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; } </style> </head> <body> <p>普通文本!!! 这是一些文本。 这是一些文本。 这是一些文本。 </p> <p class="nowrap">强制文字不换行!!! 这是一些文本。 这是一些文本。 这是一些文本。 </p> </body> </html>
效果图:
以上就是css怎么设置文本不换行显示?的详细内容,更多请关注0133技术站其它相关文章!