如何用css实现不能自动换行,如果文字过长,省略,用”…”替代?_百度知 ...
发布网友
发布时间：2022-04-24 00:37
我来回答
共6个回答
热心网友
时间：2022-04-06 15:02
最好是用块级元素，父级必须得有个宽度，如果不设置，列如移动端会出现横向滚动条
举例：
<div class='box'>
<h1>标题信息</h1>
<p>内容描述</p>
</div>
<style>
.box{width:100%}
.box h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
</style>
white-space:nowrap; //代表文字不自动换行
overflow:hidden; //代表溢出隐藏
text-overflow:ellipsis; //代表溢出省略号
很好用的，一般只设置溢出隐藏会出现截取一般的字，用这个属性就不会了，溢出会出现...
热心网友
时间：2022-04-06 16:20
比如给span标签实现问题效果：
给span添加如下css：
span{ white-space:nowrap/*使元素内的内容不能自动换行*/；width:200px;height:25px; overflow:hidden/*超出隐藏*/；text-overflow: ellipsis/*超出部分不能显示的用...代替*/;}
热心网友
时间：2022-04-06 17:55
一般都是用javascript，用CSS的倒没听说过，用javascript截取字符串，超过定义的长度就截取前面的，后面加上...就行。
热心网友
时间：2022-04-06 19:46
像你说的那种情况，应该用程序进行控制，提取前多少个字节，css我认为不能实现！
热心网友
时间：2022-04-06 21:54
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
nobr{
margin:3px auto;
width:190px;
line-height:24px;
overflow:hidden;
text-align:left;
text-overflow:ellipsis;
}
</style>
</HEAD>
<BODY>
<table border="1">
<tr>
<td width="100px">
<nobr>许国柱许国柱许国柱许国柱许国柱许国柱许国柱许国柱许国柱</nobr>
</td>
</tr>
</table>
</BODY>
</HTML>
热心网友
时间：2022-04-07 00:19
打酱油路过看看
如何用css实现不能自动换行,如果文字过长,省略,用”…”替代?_百度知 ...
text-overflow:ellipsis; //代表溢出省略号 很好用的，一般只设置溢出隐藏会出现截取一般的字，用这个属性就不会了，溢出会出现...
css怎么让p中超出长度的文字省略号显示
1、第一步，打开html编辑器并创建一个新的html文件，例如：index.html，见下图，转到下面的步骤。2、第二步，完成上述步骤后，在index.html中的标记中，输入CSS代码，见下图，转到下面的步骤。3、第三步，执行完上面的操作之后，浏览器运行index.html页面。 如果此时文本超过2行，则多余的部分将自动...
css样式怎么控制文字强制换行
答案：使用CSS样式控制文字强制换行，可以通过设置“word-wrap”属性为“break-word”来实现。详细解释：1. CSS中的word-wrap属性：在CSS中，“word-wrap”属性用于控制文本自动换行的方式。当文本到达容器边界时，如果没有足够的空间容纳整个单词或URL等，浏览器会如何处理...
div+css中怎样实现文字自动换行?
1、CSS代码：#wrap{white-space:normal; width:200px; }。2、DIV代码：ddd1111111111111111111111111111111111。可以实现文字自动换行。在Microsoft Excel软件单元格中，如果文本过长，则超出列宽以外的文本将被隐藏起来。为了在保持列宽一定的情况下显示出单元格中的所有文本，可以设置文字自动换行。
文字超出了元素的宽度,如何使用css处理?
在使用 line-clamp 时，要设置元素的 overflow 属性为非 visible，并确保其值不超过限制的行数。使用 -webkit-line-clamp 可实现类似效果，但需在特定的 display 值下使用。在处理文本溢出时，开发者应关注 CSS 的溢出属性，如 text-overflow 和 line-clamp，以提供良好的用户体验。现代 Web 布局技术...
...weight' : 'bolder'});怎么用css中的样式替换掉颜色
1：首先上述代码的效果是把样式加在了标签的行内；而标签的行内样式的权重是很高的。2：你要了解权重，比行内权重更高的就是！important;3:所以要想在css中把JS中的黄色替换掉，就要在后面加！important；4：所以你要加的tableColorSelect样式后面要用！important来提高权重就可以解决了 ...
用DIV+CSS中如何设置,超出就自动换行输出?
用DIV+CSS中设置代码：.text-overflow{ display:block;/*内联对象需加*/ width:31em;word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与...
css中如何使鼠标经过过长文字(溢出部分已隐藏为省略号)时全部显示下划 ...
用css的text-overflow: ellipsis;显示省略号IE貌似很好，但FF这贱狐狸精和其他某些贱浏览器不支持，只有用xxx:after{content:"...";}来添加省略号。网上还有种方法是加个span里面用三个点的背景图来模拟省略号，而你上传的图应该是ps的你想要的效果，但看不出来你是通过什么方式弄的省略号出来？这个...
CSS如何实现单行和多行文本溢出显示省略号
实现方法：display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;效果如图：适用范围：因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；注：1、-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的...
...插入链接后就自动换行,插入纯文本就不会。怎么让它不换行呢?_百度...
你这样写 假如class的值是 style1 文字 你在css样式里面写 ：.style1 a{margin:0;padding:0;} 还有一种处理手段就是 定义好div的高度和宽度 超出不显示 一定要写 display:inline; 这个是兼容性需要的。CSS代码如下 ：.style { width:160px; height:100px; overflow:hidden; float:left; display...
