css怎么设置显示一行

2025-09-29 04:30:46

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>

<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>

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。