css怎么设置显示一行

2026-02-14 19:18:27

1、首先打开html编辑器sublimeText,如下图

css怎么设置显示一行

2、正常解决思路:设定文本长度,文本一行显示,多出的隐藏或者省略号显示。

利用的css属性white-space:nowrap;,如下图

css怎么设置显示一行

3、利用的css属性word-break:keep-all;,如下图

css怎么设置显示一行

4、下面是详细的代码操作,如下图

css怎么设置显示一行

5、最总例子显示效果,如下图

例子一没有使用以上说的2个css属性:出现换行效果

例子二使用以上说的2个css属性:没有换行效果

css怎么设置显示一行

6、最后附上全部代码,复制到html编辑器中就能实现效果

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

*{margin:0;padding: 0; }

.wrap1,.wrap2{width: 200px;border:1px solid #000000;

margin:0 auto;margin-bottom: 20px;}

.wrap1{

word-wrap: break-word;

}

.wrap2{

white-space:nowrap;

word-wrap: break-all;

}

</style>

</head>

<body>

111111111111111111111111111

22222222222222222222222222222

</body>

</html>

猜你喜欢