1、新建一个html页面。
2、在html代码页面找到<body>标签，在<body>标签里创建一个<p>标签，然后输入显示的内容并添加一个class类为 class="cont"。
3、找到<title>标签，在这个标签下面创建一个<style>标签，在<style>标签里设置class为cont的样式内容超出后为隐藏<style>.cont{overflow: hidden/*内容超出后隐藏*/}</style>。
4、为cont类添加内容显示为一行：white-space: nowrap，内容超出后显示为省略号：text-overflow: ellipsis。
5、保存好代码后使用浏览器查看效果。
使用一段css代码：”word-wrap:break-wordword-break:break-alloverflow:hidden“。
实例演示如下：
1、设计两个容器，放入一些文字，代码如下：
此时的页面展示如下：（均为换行）
2、修改两个容器的样式，给第一个容器加上了关键代码如下：
此时的页面展示（第一个已经换行）：
扩展资料：
css详解：
一、word-wrap:normal|break-word（word-wrap属性允许长单词或URL地址换行到下一行）。
1、normal，只在允许的断字点换行（浏览器保持默认处理，默认值）。
2、break-word，在长单词或URL地址内部进行换行。
二、word-break:normal|break-all|keep-all（通过使用word-break属性，可以让浏览器实现在任意位置的换行）。
1、normal使用浏览器默认的换行规则。（默认值）
2、break-all允许在单词内换行。
3、keep-all只能在半角空格或连字符处换行。
