文字超出div，设置text-overflow:ellipsis不起作用问题

最新推荐文章于 2024-04-26 09:18:36 发布

joexk

最新推荐文章于 2024-04-26 09:18:36 发布

阅读量4.1w

点赞数 8

分类专栏： HTML 文章标签： text-overflow:ellipsis 不起作用

本文链接：https://blog.csdn.net/zhouxukun123/article/details/80878759

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

问题描述

单行文字长度超过文本框width值导致换行问题，在设置了overflow : hidden; text-overflow: ellipsis; 仍不起作用

这里写图片描述

环境：Google浏览器

解决方法

通过结合display、-webkit-line-clamp等属性实现以省略号展现超出部分。

CSS 代码

<style type="text/css">
.hideText{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* 限制在一个块元素显示的文本的行数 */
    -webkit-box-orient: vertical; /* 垂直排列 */
    word-break: break-all;  /* 内容自动换行 */
}
</style>

<body>
	<li class="clearfix g-mb10">
		<span class="txt-1">任务名称：</span>
		<span class="txt-2 hideText" id="preDsName"> style="width:200px;" </span>
	</li>
<body>

<script>
	$(document).ready(function(){
	  init();
	});
	function init(){
		...
		service.getDataSource(dsId, function(data){
			var ds = data.data;
			// 初始化界面， 鼠标悬浮文字上时显示全部文字
			$('#preDsName').attr("title",ds.dsName).html(ds.dsName);			
		});
	}
</script>

效果

这里写图片描述

注：word-wrap:break-word; 和 word-break:break-all; 的区别
两者都能使容器内的文本内容自动换行， word-break 可能的话，如行未的英文单词过长，需要词内换行， word-wrap 英语句子中单词内不强制换行，会将该单词放到下一行，而不会把单词截断。

参考：
text-overflow:ellipsis 文字超出省略号代替不起作用解决方法

joexk

关注

8
点赞
踩
25

收藏

觉得还不错? 一键收藏
2
评论
文字超出div，设置text-overflow:ellipsis不起作用问题

问题描述单行文字长度超过文本框width值导致换行问题，在设置了overflow : hidden; text-overflow: ellipsis; 仍不起作用环境：Google浏览器解决方法通过设置text-overflow: ellipsis;样式实现以省略号展现超出部分。CSS 代码&amp;lt;style type=&quot;text/css&quot;&amp;gt;.hideTex...
复制链接

扫一扫