内容超过宽度后显示省略号

<div class="demo">让我们荡起双桨，小船儿推开波浪，海面倒映着美丽的白塔，四周环绕着绿树红墙！</div>

<style>
      .demo{
         width:50px;
         border:1px solid pink;
         white-space:nowrap;
         text-overflow:ellipsis;
         overflow: hidden;
      }
</style>

显示如下：

时间： 2024-10-06 23:12:01

内容超过宽度后显示省略号的相关文章

javascript超过容器后显示省略号效果(兼容一行或者多行)

javascript超过容器后显示省略号效果在实际的项目中,由于文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其他标签,下同)区域的情况,此时比较好的做法就是当文字超过限定的div宽度后自动以省略号(…)显示,这样,按照习惯,人们都会知道这儿有文字被省略了.css中有个属性叫做text-overflow:ellipsis;比如使用css可以这样写: {width:27em; white-space:nowrap; text-overflow:ellipsis; -o

CSS实现内容超过长度后以省略号显示

样式: {width: 160px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;} 说明: white-space: nowrap 保证文本内容不会自动换行,如果多余的内容会在水平方向撑破单元格. overflow: hidden 隐藏超出单元格的部分. text-overflow: ellipsis 将被隐藏的那部分用省略号代替.

内容超过长度后以省略号显示

{width: 150px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;} 1.之前在考虑如果进行字符串截断时,一直在思考如何用js来完成而忽略了css的text-overflow属性: 通过设置white-space:nowrap使字符串不换行,然后设置text-overflow:ellipsis,显示省略标记(如果不想显示省略标记,将text-overflow设为clip): 2.缺点在于只能在只显示一行时使用

CSS控制文本超出指定宽度后用省略号代替，CSS控制文本不换行

CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;

CSS实现文本超过指定长度显示省略号

1 <style type="text/css"> 2 li { 3 width:200px;/*宽度,超过即会溢出*/ 4 line-height:25px;/*设置行间距*/ 5 text-overflow:ellipsis;/*当文本溢出时显示…此时还必须定义: 6 强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏 (overflow:hidden)*/ 7 white-space:nowrap;/*表示文本不会换行*/ 8 overflo

[TimLinux] JavaScript table的td内容超过宽度缩为三个点

1. 思路 CSS控制td内容自动缩为三个点 JS控制鼠标悬浮显示td全部内容 2. 实现 HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Table/td自动隐藏内容</title> <link rel="stylesheet" href="my.css" /> </h

css-文本超出后显示省略号

1.如果是单行文本: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 2.如果是多行文本,将文本框高度设为文字行高的倍数,然后在文本后建一个content为"..."的宽度为1em并设置文本背景色的after伪类,相对文本框设置绝对位置为下0右0:这样可以在视觉上实现同样的省略效果. 3.或者直接在文本框后新建一个元素,比如这个右下角显示详情,并且是个链接,可以新建一个链接,然后绝对位置右0下0,记着设置

span 文本内容超过宽度自动换行

span{word-break:normal; width:auto; display:block; white-space:pre-wrap;word-wrap : break-word ;overflow: hidden ;} white-space -- 通过HTML文档的源代码的排版方式控制页面显示文本的排版方式取值: normal | pre | nowrap | pre-wrap | pre-line | inherit normal: 正常无变化(默认处理方式.文本自动处理换行.

固定表格宽度超出显示...省略号

<table class="table table-hover table-responsive table-striped table-layout-fixed "> <thead class="colored-header"> <tr> <th class="text-left" width="15%">事件编号</th> <th class="t