css设置字符长度,在css中设置最大字符长度

12 个答案:

答案 0 :(得分:199)

你总是可以通过设置max-width和溢出ellipsis来使用截断方法

p {

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

max-width: 200px;

}

对于多行截断,请查看flex解决方案。

截断3行的示例。

p {

overflow: hidden;

display: -webkit-box;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;

}

答案 1 :(得分:84)

有一个CSS'长度值' ch。

来自MDN

此单位表示宽度,或更准确地说是提前量度,

字形' 0'元素中的(零,Unicode字符U + 0030)

字体。

这可能与你所追求的相近。





p {

overflow: hidden;

max-width: 75ch;

}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt rem odit quis quaerat. In dolorem praesentium velit ea esse consequuntur cum fugit sequi voluptas ut possimus voluptatibus deserunt nisi eveniet!Lorem ipsum dolor sit amet, consectetur

adipisicing elit. Dolorem voluptates vel dolorum autem ex repudiandae iste quasi. Minima explicabo qui necessitatibus porro nihil aliquid deleniti ullam repudiandae dolores corrupti eaque.





答案 2 :(得分:31)

尝试将其设置为max-width后截断字符。我在这种情况下使用了75ch

p {

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

max-width: 75ch;

}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis etc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis etc.

对于多行截断,请点击链接。

我们将使用webkit css。简而言之,WebKit是Safari / Chrome的HTML / CSS Web浏览器渲染引擎。这可能是特定的,因为每个浏览器都由渲染引擎支持以绘制HTML / CSS网页。

答案 3 :(得分:11)

示例代码:

.limited-text{

white-space: nowrap;

width: 400px;

overflow: hidden;

text-overflow: ellipsis;

}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.

答案 4 :(得分:4)

在Chrome中,您可以设置显示为“ -webkit-line-clamp”的行数:

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3; /* Number of lines displayed before it truncate */

overflow: hidden;

答案 5 :(得分:2)

此文章是针对CSS解决方案的,但是该文章已经很老了,以防万一其他人偶然发现了这个问题并使用了Angular 4+等现代JS框架,有一种简单的方法可以通过Angular Pipes不必弄乱CSS。

也可能有“反应”或“ Vue”方法。这只是为了展示如何在框架内完成。

truncate-text.pipe.ts

/**

* Helper to truncate text using JS in view only.

*

* This is pretty difficult to do reliably with CSS, especially when there are

* multiple lines.

*

* Example: {{ value | truncateText:maxLength }} or {{ value | truncateText:45 }}

*

* If maxLength is not provided, the value will be returned without any truncating. If the

* text is shorter than the maxLength, the text will be returned untouched. If the text is greater

* than the maxLength, the text will be returned with 3 characters less than the max length plus

* some ellipsis at the end to indicate truncation.

*

* For example: some really long text I won't bother writing it all ha...

*/

@Pipe({ name: 'truncateText' })

export class TruncateTextPipe implements PipeTransform {

transform(value: string, ...args: any[]): any {

const maxLength = args[0]

const maxLengthNotProvided = !maxLength

const isShorterThanMaximumLength = value.length < maxLength

if (maxLengthNotProvided || isShorterThanMaximumLength) {

return value

}

const shortenedString = value.substr(0, maxLength - 3)

return `${shortenedString}...`

}

}

app.component.html

{{ application.name | truncateText:45 }}

答案 6 :(得分:1)

HTML 强>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a urna ac

quam.

的jQuery 强>

var p = $('#dash p');

var ks = $('#dash').height();

while ($(p).outerHeight() > ks) {

$(p).text(function(index, text) {

return text.replace(/\W*\s(\S)*$/, '...');

});

}

CSS 强>

#dash {

width: 400px;

height: 60px;

overflow: hidden;

}

#dash p {

padding: 10px;

margin: 0;

}

RESULT 强>

Lorem ipsum dolor坐下来,精神上的精神。 Proin nisi

ligula,dapibus a volutpat sit amet,mattis et ...

答案 7 :(得分:1)

CSS无法实现,您必须使用Javascript。虽然你可以将p的宽度设置为多达30个字符,但是下一个字母会自动降低,但这又不会准确,如果字符是大写字母则会有所不同。

答案 8 :(得分:0)

您始终可以查看字体的宽度并获取平均字符像素大小。然后,将其乘以所需的字符数即可。有点俗气,但可以快速解决。

答案 9 :(得分:0)

以两种不同的方式尝试我的解决方案。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.

.wrapper {

padding: 20px;

background: #eaeaea;

max-width: 400px;

margin: 50px auto;

}

.demo-1 {

overflow: hidden;

display: -webkit-box;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;

}

.demo-2 {

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

max-width: 150px;

}

答案 10 :(得分:0)

用于截断多行字符的纯CSS解决方案

我遇到了类似的问题,并从Hackingui.com找到了这个优秀的css解决方案。您可以阅读该文章以获取信息,但下面是主要代码。

我对它进行了测试,效果很好。希望有人在选择JS或服务器端选项之前发现它很有用

/* styles for '...' */

.block-with-text {

/* hide text if it more than N lines */

overflow: hidden;

/* for set '...' in absolute position */

position: relative;

/* use this value to count block height */

line-height: 1.2em;

/* max-height = line-height (1.2) * lines max number (3) */

max-height: 3.6em;

/* fix problem when last visible word doesn't adjoin right side */

text-align: justify;

/* place for '...' */

margin-right: -1em;

padding-right: 1em;

}

/* create the ... */

.block-with-text:before {

/* points in the end */

content: '...';

/* absolute position */

position: absolute;

/* set position to right bottom corner of block */

right: 0;

bottom: 0;

}

/* hide ... if we have text, which is less than or equal to max lines */

.block-with-text:after {

/* points in the end */

content: '';

/* absolute position */

position: absolute;

/* set position to right bottom corner of text */

right: 0;

/* set width and height */

width: 1em;

height: 1em;

margin-top: 0.2em;

/* bg color = bg color under block */

background: white;

}

答案 11 :(得分:0)

现代CSS网格答案

在CodePen上查看完整的工作代码。鉴于以下HTML:

Several paragraphs of text...

您可以使用CSS Grid创建三列,并告诉容器在包含我们段落的中间列中采用70个字符的最大宽度。

.container

{

display: grid;

grid-template-columns: 1fr, 70ch 1fr;

}

p {

grid-column: 2 / 3;

}

这是它的样子(检出CodePen为完整示例):

OcDJK.png

这是另一个示例,您可以在其中使用minmax来设置值的范围。在小屏幕上,宽度设置为50个字符,在大屏幕上,宽度设置为70个字符。

.container

{

display: grid;

grid-template-columns: 1fr minmax(50ch, 70ch) 1fr;

}

p {

grid-column: 2 / 3;

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/364272.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一些sql 语句(行列转换等)

1. 行列转换--普通假设有张学生成绩表(CJ)如下Name Subject Result张三 语文 80张三 数学 90张三 物理 85李四 语文 85李四 数学 92李四 物理 82想变成 姓名 语文 数学 物理张三 80 90 85李四 85 92 82declare sql varchar(4000)set sql select Nameselect sql sql ,sum(cas…

关于html以及js相关格式验证的记录

验证的常见方式 我们在写前端的时候或多或少的会遇到一些验证格式问题&#xff0c;通常我们有三种解决办法。 第一种就是在输入完成后在输入框附近验证给出提示第二种就是在输入完成后在提交的时候排着验证提示第三张就是限制输入 前面两种我们都是非常的熟悉以及想到的&…

mysql重做日志_MySQL-重做日志 redo log -原理

【redo log buffer】【redo log file】-原理目录&#xff1a;1.重做日志写入过程图2.相关知识点汇总图3.redo_log_buffer 原理4.redo_log_file 原理1. 重做日志写入过程&#xff1a;2. 相关知识点汇总&#xff1a;3. redo log buffer 原理重做日志缓冲(redo log buffer)是Innod…

Java 8 Friday:使用Streams API时的10个细微错误

在Data Geekery &#xff0c;我们喜欢Java。 而且&#xff0c;由于我们真的很喜欢jOOQ的流畅的API和查询DSL &#xff0c;我们对Java 8将为我们的生态系统带来什么感到非常兴奋。 Java 8星期五 每个星期五&#xff0c;我们都会向您展示一些不错的教程风格的Java 8新功能&#…

孤荷凌寒自学python第六十八天学习并实践beautifulsoup模块1

孤荷凌寒自学python第六十八天学习并实践beautifulsoup模块1 &#xff08;完整学习过程屏幕记录视频地址在文末&#xff09; 感觉用requests获取到网页的html源代码后&#xff0c;更重要的工作其实是分析得到的内容&#xff0c;因此这时候大名鼎鼎的BeautifulSoup模块就可以大展…

如何将h5网页改成微信网页

1、如何将h5网页改成微信网页 1、设置安全域名 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 备注&#xff1a;登录后可在“开发者中心”查看对应的接口权限。 2、引用一个js文件 在微信开发者里面 js sdk里面 <sc…

AspNetForums中基于角色的权限控制

AspNetForums中基于角色的权限控制 http://blog.joycode.com/dotey/archive/2005/02/24/44791.aspxasp.net页面如何控制页面依据不同用户权限有不可见、可见、编辑 三种操作权限 http://community.csdn.net/Expert/topic/3436/3436974.xml?temp.0139429做过权限管理和想做权限…

c#a服务器上传文件b服务器,C#_c#批量上传图片到服务器示例分享,客户端代码: 复制代码 代码 - phpStudy...

c#批量上传图片到服务器示例分享客户端代码&#xff1a;/// /// 批量上传图片/// /// 服务器路径/// 图片文件夹路径/// 图片名称public void UpLoadFile(string srcurl, string imagesPath, List files){int count 1;foreach (string imageName in files){string name image…

mysql集群重启offline_mysql集群搭建问题及解决方法集锦

在上一篇博客中写了如何搭建mysql集群&#xff0c;之所以遇到这些问题&#xff0c;是因为刚开始弄mysql集群的时候不熟悉&#xff0c;正是因为这些问题&#xff0c;让我对mysql集群的了解渐渐深入&#xff0c;下面介绍在搭建mysql集群的时候我遇到了一些问题。1、mysql集群安装…

C - CJSON

cJSON API说明cJSON_Version()获得cJSON的版本cJSON_InitHooks();初始化cJSON_Hooks结构体cJSON_Parse();将字符串解析成cJSON结构体cJSON_ParseWithOpts()使用一些配置解析字符串cJSON_Print()将cJSON结构体转换成格式化的字符串cJSON_PrintUnformatted()将cJSON结构体转换成…

Java SE 8新功能导览:Java开发世界中的重大变化

与其他专业团队成员一样&#xff0c;我是采用OpenJDK的成员之一&#xff0c;但是从最近8个月开始加入&#xff0c;我们经历了Java SE 8 开发&#xff0c;编译&#xff0c;编码&#xff0c;讨论等各个阶段&#xff0c;直到将其付诸实践为止。 。 它于2014年3月18日发布&#xff…

蘑菇街一电话面试1

说说你常用的技术栈&#xff1f; ajax解决跨域问题的方法&#xff1f;jsonp的主要实现原理&#xff1f; 点击页面某个按钮&#xff0c;将原本一行显示的内容分成两行&#xff0c;如何实现&#xff1f; 怎样实现段首缩进&#xff1f;值是什么&#xff1f; 如何实现文本限制显示两…

从Java官网下载最新的文档(包含API文档)

Java学习资料(适合c转java的同学)&#xff1a; Java中带包&#xff08;创建及引用&#xff09;的类的编译 - 小明快点跑 JAVA 对象引用&#xff0c;以及对象赋值 - 飘来荡去。 Java官网下载页&#xff1a;https://www.oracle.com/technetwork/java/javase/downloads/index.html…

12121

sdfsfsfdsf转载于:https://www.cnblogs.com/zhongkeruanjian/archive/2006/06/01/414875.html

html option ajax,Ajax实现简单下拉选项效果【推荐】

基本都是固定步骤&#xff01;主要在JAVASCRIPT和PHP中的操作1、HTML代码里就只有两个SELECT标签如下&#xff1a;请选择请选择2、Javascript中进行创建选项和执行AJAX异步请求步骤如下var xhr getXhr();// 第一次执行Ajax异步请求 - 省份window.onload function(){xhr.open(…

svn安装教程 mysql_CentOS6.4 下安装SVN的详细教程(超详细)

1、检查系统是否已经安装如果安装就卸载rpm -qa subversionyum remove subversion2、安装yum install subversion3、建立SVN库mkdir -p /home/svn/repossvnadmin create /home/svn/repos执行上面的命令后&#xff0c;自动建立repositories库&#xff0c;查看/home/svn/repos 文…

babel安装

注意&#xff1a;如果没有装node.js&#xff0c;先去装一个&#xff01;&#xff01;安装node.js时会默认安装npm。 步骤&#xff1a; 1、新建一个文件夹&#xff0c;装接下来的所有东西。我新建了一个learn-es6文件夹 2、在learn-es6项目文件下创建根目录文件&#xff1a; …

针对新手的Java EE7和Maven项目–第1部分–简单的Maven项目结构–父pom

为什么呢 很多时候&#xff0c;我在日常工作中试图解决一些基本或复杂的Maven / Java EE项目结构问题。 为了提供解决方案&#xff0c;我经常最终会尝试项目结构&#xff0c;测试我在不同应用程序服务器上的部署并细化我的配置。 Maven对于新来者来说可能会有陡峭的学习曲线&a…

sql server 学习记录

sql-server 基础&#xff1a; 1、查看sqlserver的数据表 SELECT name,crdate FROM SysObjects Where XTypeU order by crdate desc 查看数据表的字段 SELECT A.name AS table_name,B.name AS column_name,C.value AS column_description FROM sys.tables A INNER JOIN sys.col…

简单对象访问协议

简单对象访问协议 2000年7月11日 SOAP 是“简单对象访问协议”&#xff08;Simple Object Access Protocol&#xff09;的简称&#xff0c;这种方式能够使用现有的 Internet 体系结构&#xff0c;创建运行在 Internet 上的、分布广泛的复杂计算环境。SOAP 所涉及的应用程序以非…