单行文本省略是现代网页设计中常用的技术，大多数网站都在使用。 单行文本省略适用于显示摘要信息的场景，如列表标题或文章摘要。 在响应开发中，适应幅度要素的单行文本的省略容易失效，对网络开发感到困扰。 因此，本论文将研究适应幅度要素的单行文本省略的使用方法。 当前浏览器支持单行文本显示的省略号(.)样式。 通常，要实现单行文本省略，只需在元素中添加以下三种CSS样式：
. demo { text-overflow : ellipsis； white-space: nowrap； overflow :隐藏； }
单行文本的省略与元素及其父元素的width属性无关
在很多文章中，如果省略了一行文本，则添加了设置width属性的条件。 事实真的是这样吗？ 通过以下实例进行验证就可以证明这个结论。
例1 )在body中添加p和span标签，并设置单行文本省略：
stylebody，p，span{ margin:0； 垫：0； }p，span { text-overflow : ellipsis； white-space: nowrap； overflow :隐藏； (}/stylebody p )单行省略、单行省略、单行、单行省略、单行省略、/p span单行、单行省略、单行、单行、单行、单行单行文本省略、单行文本省略/span/body的执行结果是p标签内的文本省略成功，span标签内的文本省略失败，结果如下图所示。
最后，我尝试将p标签的宽度设置为auto或100%，但结果不变； 即使将p标签和span标签的固定宽度值设定为300px，结果也不会改变； 用其他标签包裹p标签和span标签不会改变结果； 即使包裹元素具有固定宽度值，结果也是相同的。 这足以证明单行文本的省略与元素及其父元素的width属性无关。
单行文本省略和元素及其父元素的display属性有关
影响单行文本省略的属性是什么？ 在例1中，特意用于p标签和span标签。 span标记不能省略。 测试结果表明，display属性不能省略inline和inline-block元素。 这表明单行文本省略与元素的display属性相关。
1）table元素（或display为table元素）内单行文本省略，需要给table元素（或display为table元素）添加table-layout:fixed样式
在table布局元素中设置的子元素的一行中的文本省略不起作用。 例如：
stylebody，p，span，img{ margin:0； 垫：0； }p，span { text-overflow : ellipsis； white-space: nowrap； overflow :隐藏； }.demo{ display:table； width:100%； padding:15px 0； border-top:1px solid #ddd； } .demo .left， demo.right { display : table-cell； } .demo .left{ width:120px； 最小宽度：120 px； height:90px； background-color:blue； }.demo.left img { display : block； }.demo.right { vertical-align : top； padding-left:15px； }/stylebodydivclass=' demo ' divclass=' left ' img src=' img/187940841949893204.jpg ' width=' 100 % ' height ' 这是介绍文。 这是介绍文。 这是介绍文。 这是介绍文。 这是介绍文。 这是介绍文。 这是介绍文。 /p /div /
div></body>这个实例中，demo元素设置为dispaly:table，其子元素left和right设置为display:table-cell，这种布局方式导致了元素right内的h2和p的文本省略样式都不起作用，运行结果如下图：
为了使元素right内的h2和p的文本省略样式起作用，必须在元素demo（即设置display:table的元素）添加一条样式table-layout:fixed，这个解决方式同样适用于table元素。添加这个样式后，运行结果如下图：
2）display为flex元素的子元素flex-item如果是自适应宽度时，flex-item内的子元素实现单行文本省略，需要给flex-item添加overflow:hidden样式
display为flex元素的子元素flex-item如果是自适应宽度时，flex-item内的子元素单行文本省略样式不起作用，例如：
<style>body,h2,p,span,img{ margin:0; padding:0; box-sizing:border-box;} .demo{ display:flex; display:-webkit-flex; width:100%; padding:15px 0; border-top:1px solid #ddd;} .left,.right{ height:90px;} .demo .left{ width:120px; background-color:red; flex-shrink: 0;} .demo .right{ flex:auto; -webkit-flex:auto; padding-left:15px;} h2,p,span{ text-overflow:ellipsis; white-space: nowrap; overflow: hidden;}</style><body> <div class="demo"> <div class="left"><img src="img/1879408419498933204.jpg" width="100%" height="auto" /></div> <div class="right"> <h2>这是一个标题</h2> <p>这是一段介绍文字。这是一段介绍文字。这是一段介绍文字。这是一段介绍文字。这是一段介绍文字。这是一段介绍文字。这是一段介绍文字。这是一段介绍文字。这是一段介绍文字。</p> </div> </div></body>在这个flex布局的实例中，元素right的宽度时自适应的，元素right内的h2和p元素单行文本省略样式都不起作用。如果去掉标签直接在元素right内添加文本，并为元素right添加单行文本省略样式，这时单行文本省略样式却可以正常工作。该实例的运行结果如下图：
在这个实例中，为元素right添加overflow:hidden样式后，单行文本省略样式工作正常，运行结果如下图：
总结：
1）单行文本省略必须满足三个CSS样式：text-overflow:ellipsis，white-space: nowrap，overflow: hidden。
2）单行文本省略和元素及其父元素的width属性都无关
3）table元素（或display为table元素）内单行文本省略，需要给table元素（或display为table元素）添加table-layout:fixed样式
4）display为flex元素的子元素flex-item如果是自适应宽度时，flex-item内的子元素实现单行文本省略，需要给flex-item添加overflow:hidden样式