CSS 文本溢出时显示省略标记

时间：2022-09-20 19:32:54

如标题所示...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>CSS 文本溢出时显示省略标记</title>

<style type="text/css">

.overflowTest{

    width:200px;/*基本容器显示宽度*/

    overflow:hidden;/*overflow 属性规定当内容溢出元素框时发生的事情。*/

    text-overflow:ellipsis;/*clip:修剪文本|ellipsis:显示省略符号来代表被修剪的文本|string:使用给定的字符串来代表被修剪的文本(自定义)*/

    white-space:nowrap;/*文本不会换行*/

}

</style>

</head>

<body>

<div>正常显示:qwertyuiopasdfghjklzxcvb</div>

<div class="overflowTest">处理后:qwertyuiopasdfghjklzxcvb</div>

</body>

</html>

CSS 文本溢出时显示省略标记的更多相关文章

  1. css 文本溢出时显示省略号

    .text-ellipsis { width:100px; height:60px; overflow: hidden;//隐藏滚动条 text-overflow:ellipsis; white-sp ...

  2. 【UWP】仅在TextBlock文本溢出时显示Tooltip

    前言 这是我今天在回答SO问题时偶然遇到的,觉得可能还比较通用,就记录下来以供参考. 通常,我们使用ToolTip最简单的方式是这样: <TextBlock Text="Test&qu ...

  3. css文本溢出隐藏显示省略号（单行&plus;多行）

    文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     ove ...

  4. &num;CSS 文本溢出部分显示省略号

    单行结尾溢出: 用text-overflow:ellipsis属性实现,当然还需要加宽度width属来兼容部分浏览. width:300px;overflow: hidden; text-overfl ...

  5. CSS文本溢出，显示省略号（&period;&period;&period;）

    方式1:这种方式就是必须要跟width搭配使用,当你使用的display:flex; 的时候可能会影响样式 width: 200px; overflow: hidden; /*超出部分隐藏*/ tex ...

  6. HTML技巧篇：如何让单行文本以及多行文本溢出时显示省略号&lpar;…&rpar;

    参考:https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc 本篇文章主要给大家介绍一下在html ...

  7. CSS文本溢出效果&amp&semi;滚动条样式设置

    一.文本溢出 1.overflow: hidden;  超出文本会被剪裁隐藏不可见 scroll;超出文本会被剪裁, 显示滚动条 auto; 如果文本超出会显示滚动条,没超出不会显示, overflo ...

  8. text-overflow文本溢出隐藏&OpenCurlyDoubleQuote;&period;&period;&period;”显示

    一.文本溢出省略号显示 1.文本溢出是否“...”显示属性:text-overflow:clip(不显示省略标记)/ellipsis(文本溢出时“...”显示) 定义此属性有四个必要条件:1)须有容器 ...

  9. table内容超出宽度时隐藏并显示省略标记

    HTML中,一个表格,要达到二个条件: 1.内容多了不自动换行: 2.固定单元格宽度.如果内容超出,则隐藏: 如 果在IE下,只是写成<table style="table-layou ...

随机推荐

  1. Raspberry Pi（树莓派）上安装Raspbian（无路由器，无显示器）

    一. 准备工作 1. 树莓派主板 型号:树莓派3 B型 处理器:四核64位ARM Cortex-A53 CPU 内核架构:ARMv8 2. 一张大于8G的TF卡(本人用的是32G的,也作为PiLFS用 ...

  2. 【腾讯Bugly干货分享】程序员们也该知道的事——&OpenCurlyDoubleQuote;期权和股票”

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/pfj9NLLuKYAfJJF84R9WAw 作者:B ...

  3. （转）Three challenges you’re going to face when building a chatbot

        转自:https://blog.infermedica.com/three-challenges-youre-going-to-face-when-building-a-chatbot/   ...

  4. jQuery学习-打字游戏

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  5. SVN中Branch和Merge实践

    参考资料:http://blog.csdn.net/eggcalm/article/details/6606520 branch主要用于新功能的开发,开发过程中不断从trunk merge revis ...

  6. MyBatis知多少（10）应用程序数据库

    应用程序数据库往往是最小.最简单.也最易于使用的数据库.这种数据库往往是我们这些开发人员通常不介意使用甚至非常乐意使用的.应用程序数据库通常与我们的应用程序处于同一个项目中,两者一齐设计和实现.正是因 ...

  7. Oracle 中 call 和 exec的区别

    今天发现了一个小东西,觉得很有意思,查找了一些资料,跟大家分享一下: 在sqlplus中: 在第三方提供的工具(如:plsqldev) 总结: exec是sqlplus的命令,只能在sqlplus中使 ...

  8. 编程时 对 用途这个字段定义时 不要用using 这个英文

    编程时  对 用途这个字段定义时  不要用using 这个英文

  9. PHPMailer 命令执行漏洞（CVE-2016-10033）分析（含通用POC）

    对比一下新老版本:https://github.com/PHPMailer/PHPMailer/compare/v5.2.17…master 其实答案呼之欲出了——和Roundcube的RCE类似,m ...

  10. Java jni字符串转换

    1.jstring转QString 对于Qt5.2以上(含)可以用QAndroidJniObject::toString(),详见这里:https://*.com/questi ...

相关文章