html怎样让超出的内容显示为省略号?

html怎样让超出的内容显示为省略号?,第1张

文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到,我想很多人都碰到过吧,这个有两种解决方法

一是用程序开截取字符长度,这个其实也是可以的

第二种是用样式来做,这里主要介绍一下用样式怎么来做吧,我话也不多说了吧直接上代码吧,

css样式如下:

[css]

.css1{

color:#6699ffborder:1px #ff8000 dashed

margin-bottom:20px

width: 20em/*不允许出现半汉字截断*/

}

.css2 {

overflow: hidden/*自动隐藏文字*/

text-overflow: ellipsis/*文字隐藏后添加省略号*/

white-space: nowrap/*强制不换行*/

width: 20em/*不允许出现半汉字截断*/

color:#6699ffborder:1px #ff8000 dashed

}

[/css]

html代码如下:

[html]

<div class="css1">Web前端开发 – 专注于网站前端设计与Web用户体验</div>

<div class="css2">Web前端开发 – 专注于网站前端设计与Web用户体验</div>

[/html]

<st这yle type=”text/css”>

.css1{

color:#6699ffborder:1px #ff8000 dashed

margin-bottom:20px

width: 20em/*不允许出现半汉字截断*/

}

.css2 {

overflow: hidden/*自动隐藏文字*/

text-overflow: ellipsis/*文字隐藏后添加省略号*/

white-space: nowrap/*强制不换行*/

width: 20em/*不允许出现半汉字截断*/

color:#6699ffborder:1px #ff8000 dashed

}

</style>

<div class=”css1″>Web前端开发 – 专注于网站前端设计与Web用户体验</div>

<div class=”css2″>Web前端开发 – 专注于网站前端设计与Web用户体验</div>

<p>

text-overflow:ellipsis

white-space:nowrap

overflow:hidden

输入框调整下就可以了,超出部分会成省略号


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/8357551.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-15
下一篇 2023-04-15

发表评论

登录后才能评论

评论列表(0条)

保存