精华内容
下载资源
问答
  • 一、a标签为例 单行超出隐藏 width: 200px; /* 设置一个固定宽度 */ display: block; /* 要变成块级元素才可以*/ over-flow: hidden; /* 自动隐藏文字 */ text-overflow: ellipsis; /* 文字隐藏后添加省略号 */ ...

    一、a标签为例

    单行超出隐藏

    width: 200px; /* 设置一个固定宽度 */
    display: block; /* 要变成块级元素才可以*/
    
    over-flow: hidden; /* 自动隐藏文字 */
    white-space: nowrap; /* 强制不换行 */
    text-overflow: ellipsis; /* 文字隐藏后添加省略号 */
    

    两行超出隐藏

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box; /* 作为弹性伸缩盒子模型显示 */
    -webkit-box-orient: vertical; /* 设置伸缩盒子的子元素排列方式--从上到下垂直排列 */
    -webkit-line-clamp: 2; /* 显示的行 */
    
    1. text-overflow
    text-overflow: clip | ellipsis | string
    
    描述
    clip 修剪文本
    ellipsis 显示省略号来代替被修剪的文本
    string 使用给定的字符串来代替被修剪的文本
    1. white-space | word-wrap | word-break 的区别
      文本换行有很多方法:
      1.<br>标签元素,强制换行。
      2.<p>元素,<div>设定宽度,都可以对文本内容实现自适应换行。
      3.对于长单词或链接,默认不会断开换行,这就需要word-wrap或word-break强制换行。
    div {
    	white-space: nowrap;
    }
    /*
    强制不换行(直到遇到<br>)
    */
    
    div {
    	word-break: normal; // 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
    	word-break: break-all; // 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
    	word-break: keep-all; // 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本
    }
    
    div {
    	word-wrap: break-word; // 在长单词或URL地址内部进行换行
    }
    

    (1)white-space:如何处理元素内的空白

    • normal:默认,空白会被浏览器忽略。
    • pre:空白会被浏览器保留(类似HTML中的pre标签)。
    • nowrap:强制不换行,直到遇到br标签。
    • pre-wrap:保留空白符序列,但正常换行。
    • pre-line:合并空白符序列,但保留换行符。
    • inherit:从父元素继承该属性的值。

    (2)word-wrap:是否允许浏览器在单词内进行断句

    • normal:只在允许的断字点换行(浏览器保持默认处理)。
    • break-word:在长单词或url地址内部进行换行(内容将在边界内换行 如果需要 单词内部允许断行)。

    (3)word-break:怎么样进行单词内的断句

    • normal:使用浏览器默认的换行规则。
    • break-all:允许在单词内(任意非CJK(Chinese/Japanese/Korean)文本)换行
    • keep-all:只能在半角空格或连字符处换行。
    展开全文
  • ${companyPosition.jobFunction } :  【${companyName}】   +查看更多 ...2、对设置超出宽度隐藏,及带上省略号 3、 加上display:inline属性,让在行级显示
    <span style="font-family: Arial, Helvetica, sans-serif;"><ul class="text-list" style="min-height: 115px;"></span>
    								<s:iterator value="companyCareerList">
    									<li style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 212px;">
    											<a style="display: inline;" href="${basePath}/page/floatcareerinfo.html?id=${companyPosition.id}" target="_blank" >${companyPosition.jobFunction }</a> : 
    											<a style="display: inline;" href="${basePath}/page/queryPositionByComp.action?companyId=${id}" target="_blank">【${companyName}】</a>
    									</li>
    								</s:iterator>
    								<li> </li>
    								<li><a style="border-top:solid 1px red;" href="${basePath}/page/searchJob.html">+查看更多</a></li>
    							</ul>


    大神说的重点如下:

    1、<a>标签为块级标签;会单独占一行。

    2、<li style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 212px;">对<li>设置超出宽度隐藏,及带上省略号

    3、<a style="display: inline;"> 加上display:inline属性,让<a>在行级显示


    展开全文
  • 对div或者span同时应用Css: text-overflow:ellipsis; //超出的用...实现 white-space:nowrap; //禁止换行 overflow:hidden; //超出隐藏 ...当然了你的页面元素要设置固定的...如果是 a 标签还要另加上 display:block;

    对div或者span同时应用Css:

    text-overflow:ellipsis; //超出的用...实现
    white-space:nowrap; //禁止换行
    overflow:hidden; //超出隐藏

    当然了你的页面元素要设置固定的宽度,超出了宽度才会显示。

    如果是 a 标签还要另加上
    display:block;

    展开全文
  • size属性:字体大小 取值:1-7 可以为负数,为负数字字体会变小,超出7以最大值为准 默认为3 (官方取值1-7,无特殊情况,不要使用负数) 加粗字:<b>...标签中的内容字体会加粗 斜体字:<i>...标签中的...
  • 四个限制条件: .goods_name{ /*固定宽度*/ width: 5rem; /*超出隐藏*/ overflow: hidden; /*禁止换行*/ white-space: nowrap;... /*超出用省略号代替*/ ...a标签内容超出以后隐藏并且显示省略点: htt...

    四个限制条件: 

    .goods_name{
        /*固定宽度*/
        width: 5rem;
        /*超出隐藏*/
        overflow: hidden;
        /*禁止换行*/
        white-space: nowrap;
        /*超出用省略号代替*/
        text-overflow: ellipsis;
    }

    a标签内容超出以后隐藏并且显示省略点:

    https://blog.csdn.net/z564359805/article/details/102604545

    展开全文
  • css的自动换行,内容的省略号

    千次阅读 2012-08-13 21:24:21
    注意点:长串字母实现前提,必须将宽度限制直接添加到“文本内容的标签”。   2.控制数据超出一定范围,自动隐藏,并显示省略号...——通过title值来显示全部数据信息 a.数据不换行:white-space:nowrap; b....
  • 1,在不影响布局的情况下,可以选择,数据自动换行a.设置宽度限制:可以使用width值和max-width最大...2,控制数据超出一定范围,自动隐藏——通过title值来显示全部数据信息a.设置宽度限制:可以使用width值和ma...
  • <a href="javascript:history.go(-1)">回到上一个网页</a> ——修改placeholder提示的样式: 1.除IE外通用写法 类名或标签名::placeholder {color: red;...超出隐藏(overflow:hid...
  • HTML CSS整理

    2019-12-13 15:28:08
    <a href="javascript:history.go(-1)">回到上一个网页</a> ——修改placeholder提示的样式: 1.除IE外通用写法 类名或标签名::placeholder {color: red;...超出隐藏(overflow:hi...
  • HTML CSS整理笔记

    2019-12-04 08:42:44
    <a href="javascript:history.go(-1)">回到上一个网页</a> ——修改placeholder提示的样式: 1.除IE外通用写法 类名或标签名::placeholder {color: red;...超出隐藏(overflow:hi...
  • <a href="javascript:history.go(-1)">回到上一个网页</a> ——修改placeholder提示的样式: 1.除IE外通用写法 类名或标签名::placeholder {color: red;...超出隐藏(overflow:hi...
  • HTML+CSS整理大全

    2019-11-23 15:09:51
    <a href="javascript:history.go(-1)">回到上一个网页</a> ——修改placeholder提示的样式: 1.除IE外通用写法 类名或标签名::placeholder {color: red;...超出隐藏(overflow:hid...
  • HTML css的所有知识点

    2019-10-29 22:27:02
    <a href="javascript:history.go(-1)">回到上一个网页</a> ——修改placeholder提示的样式: 1.除IE外通用写法 类名或标签名::placeholder {color: red;...超出隐藏(overflow:hidden)、 强制在同...
  • 最新 H5 HTML CSS记录 新手入门

    千次阅读 2019-10-29 17:18:40
    新手扫码体验小程序 ...<a href="javascript:history.go(-1)">回到上一个网页</a> ——修改placeholder提示的样式: 1.除IE外通用写法 类名或标签名::placeholder {color: red;...超出隐藏(ov...
  • 初级前端面试题

    2017-04-25 11:11:00
    思路:用css实现图片切换效果,我们需要用一个足够宽的div装图片,用一个div来显示图片,宽度应该和图片大致一样,超出部分隐藏,设置里面的div(也可以用ul li )左浮动,使其横向排列;每个图片设置两个按钮,一个...
  • 68、按钮与A标签的DISABLED使能属性 340 69、SELECT使用详解 340 70、JS触发SELECT的ONCHANGE事件 349 71、ONBEFOREUNLOAD、ONLOAD与ONUNLOAD事件 349 72、判断 IFRAME 是否加载完成的方法 352 73、JS判断页面是否是...
  • 易语言 茶凉专用模块

    2010-05-04 12:26:36
    参数 窗口新宽度, 整数型, 可空, 可空:原宽度不变 .参数 窗口新高度, 整数型, 可空, 可空:原高度不变 .子程序 窗口隐藏显示, 逻辑型, 公开, 显示隐藏指定句柄的窗口(如果显示则隐藏:返回假,如果隐藏则显示:返回真) ...
  • 文章管理系统

    2014-12-06 10:19:22
    5.[纠正]纠正幻灯片下面的广告位和首页栏目广告位宽度少2像素BUG 6.修复其他小细节 2013年03月02日 V2.71更新包 ★更新方式:admin文件夹改成你后台目录名,然后补丁包里的所有文件覆盖进去。 1.关键字管理的地址...
  • 精易模块[源码] V5.15

    2015-03-21 22:03:37
    6、新增“类_任务栏”可以显示隐藏任何第三方窗口图标,相当于易中的(不在任务栏显示),带【实例】演示。 7、新增“类_线程池1”中的“等待”方法。 8、修复“编码_Utf8到Ansi“分配内存失败BUG,感谢易友【仁鹰】...

空空如也

空空如也

1 2
收藏数 25
精华内容 10
热门标签
关键字:

a标签超出宽度隐藏