css中要求文字必须是一行,超出部分自动隐藏的问题

问题:客户要求文字必须是一行,超出部分自动隐藏。而现在没有办法在php里控制截取字数,只能在前端css里处理。

首页div的宽度是一定的。

处理办法为:
  1. word-break: keep-all;/*这个可以不要*/

    word-wrap: break-word;
    white-space: nowrap;<span style="color: rgb(85, 85, 85); font-family: 微软雅黑, PMingLiU, Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 22px; background-color: rgb(240, 240, 240);">/*强制不换行,如果没有此行,则当用鼠标滑过的效果时,有可能会出现,因为超出的部分已经漂浮到其他的div上了*/</span>
    overflow: hidden;<span style="color: rgb(85, 85, 85); font-family: 微软雅黑, PMingLiU, Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 22px; background-color: rgb(240, 240, 240);"> /*自动隐藏文字*/</span>
    <span style="color: rgb(85, 85, 85); font-family: 微软雅黑, PMingLiU, Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 22px; background-color: rgb(240, 240, 240);"><span style="color: rgb(85, 85, 85); font-family: 微软雅黑, PMingLiU, Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 22px; background-color: rgb(240, 240, 240);">text-overflow: ellipsis;/*文字隐藏后添加省略号,如果不想用,可以省略此项*/ </span>
    </span>
    <span style="color: rgb(85, 85, 85); font-family: 微软雅黑, PMingLiU, Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 22px; background-color: rgb(240, 240, 240);"><span style="color: rgb(85, 85, 85); font-family: 微软雅黑, PMingLiU, Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 22px; background-color: rgb(240, 240, 240);"><span style="color: rgb(85, 85, 85); font-family: 微软雅黑, PMingLiU, Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 22px; background-color: rgb(240, 240, 240);">width: 20em;/*不允许出现半汉字截断*/</span>
    </span></span>
时间: 2024-08-02 18:02:18

css中要求文字必须是一行,超出部分自动隐藏的问题的相关文章

如何让div中的文字只显示一行,多余的文字隐藏并加上省略号(超链接形式)

写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签  text-overflow  ,其属性规定当文本溢出包含元素时发生的事情.语法如下: text-overflow: clip|ellipsis|string; 代码如下: <!DOCTYPE html><html><head><meta http-equiv="Content-Type&q

css中的文字

CSS 字体系列 在 CSS 中,有两种不同类型的字体系列名称: 通用字体系列 - 拥有相似外观的字体系统组合(比如 "Serif" 或 "Monospace") 特定字体系列 - 具体的字体系列(比如 "Times" 或 "Courier") 除了各种特定的字体系列外,CSS 定义了 5 种通用字体系列: Serif 字体 Sans-serif 字体 Monospace 字体 Cursive 字体 Fantasy 字体 字体

解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号

在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,这个时候我们可能会有为了布局稳定把单元格宽度写死的情况:但是我们设置了宽度却发现超出了宽度之后会自动变大,用css定义元素的overflow:hidden;属性也不行:最后找的的解决方案如下: table{         table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用. */ } td{     width:100%;     word-break:keep-all;/*

CSS div内文字显示两行,超出部分省略号显示

1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKit内核的css前缀为“-webkit-”,Comodo Drangon(科摩多龙),苹果,安卓,搜狗高速浏览器3,快快浏览器,枫树浏览器,云游浏览器,360极速浏览器,世界之窗极速版,SRWare Iron,猎豹浏览器,RockMelt,QQ浏览器都可识别. 备注:IOS版的微信.android版本

html&amp;css中的文字对齐问题

html&css的使用过程中,我们经常会遇到很多文字对齐问题.下面我要介绍一个有丁点难的文字对齐问题. 实现效果如下图所示. 两行长度不定的文字,要让它们总体水平居中,然后,这两行字要左对齐,如下图所示. 听起来好像挺简单,然而实现起来却...... 错误做法一: 用一个大块div包住两个div,在大div中设置"text-align:center; ",在小div中设置"text-align:left; " 结果如下图所示. 因为div会占据一整行,而不能

CSS中overflow:hidden在ie6、ie7无效不能隐藏解决办法

在我们做前端时会碰到一个固定的宽度当文字超过我们这个固定宽度时我们不换行的同时希望文字隐藏了, 那我们通常会使用overflow:hidden来隐藏文字,但是发现在ie6,ie7下overflow:hidden无效了,那么如何解决这个问题呢? 这就是ie6.ie7 的bug. 解决方法: 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidden属性就会失效.我们在IE 6 7内发现子元素会超出父元素设定的高度,即使父元素设置了o

CSS中有关水平居中和垂直居中的解决办法

CCS中让div等块级元素在父级元素中居中的方法: (1)div{  margin:0 auto   } 该方法只能实现水平的居中,无法实现元素的垂直居中 (2)当div元素的宽高是固定的,然后设置位置为绝对位置absolute,左边框和上边框的距离设置为50%,这个50%就是指具有定位为absolute或者是relative的祖元素的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就是该DIV宽度和高度的一半.: . parent{ position:relative: }

CSS文本与文字

CSS中长度与颜色 CSS中的文字属性 CSS中的文本属性 14.1 CSS中长度与颜色 长度单位                 说明 in                英寸 cm                公分 mm                公里 cm                以目前字体高度为单位 ex                以小写字母高度为单位(大部分不支持) pt                1pt/72英寸 pc                1pc/12p

关于用css实现的文字超出部分显示省略号

文字超出部分显示省略号还是比较常用的一个效果,最近看到网上的一些方法亲自实践了一下,发现有些以前一些浏览器不能用的属性现在可以用了,于是研究了一番,现总结如下: 我们先来看下HTML代码: <div> <p><span>用css来实现当文字超出宽度时显示省略号的效果</span></p> </div> CSS代码: div{ width: 200px; } span{ display: block; width: 200px; ove