text-overflow的用法

text-overflow:clip 超出直接裁剪掉
text-overflow:ellipsis 超出加上...

配合:
overflow: hidden; // 超出隐藏
white-space: nowrap; // 不换行

  只能省略一行

    <div>
        <p>“塔拉斯”将以每小时10-15公里的速度向西偏北方向移动,今天早晨到上午将擦过海南岛南部沿海,下午移入北部湾,明天(17日)上午将在越南东北部沿海登陆(热带风暴级或强热带风暴级,9-10级,23-25米/秒),以后强度逐渐减弱。</p>
    </div>
        body,p{
            margin: 0;
            padding: 0;

        }
        div{
            width: 400px;
            height: 200px;
            border: 3px solid black;
            margin: 100px auto;
        }
        p{
            text-overflow: ellipsis;
            overflow: hidden; /*超出隐藏*/
            white-space: nowrap; /*不换行*/
        }       

省略任意行(兼容性不是那么好)

    <div>
        <p>“塔拉斯”将以每小时10-15公里的速度向西偏北方向移动,今天早晨到上午将擦过海南岛南部沿海,下午移入北部湾,明天(17日)上午将在越南东北部沿海登陆(热带风暴级或强热带风暴级,9-10级,23-25米/秒),以后强度逐渐减弱。</p>
    </div>
        body,p{
            margin: 0;
            padding: 0;

        }
        div{
            width: 400px;
            height: 200px;
            border: 3px solid black;
            margin: 100px auto;
        }
        p{
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp:3; //要看到几行
        }

时间: 2024-10-14 03:46:08

text-overflow的用法的相关文章

jQuery中的text(),html(),val()用法

jQuery中的text(),html(),val()用法 text():获取或者改变指定元素的文本 html():获取或改变指定元素的html元素以及文本 val():获取或者改变指定元素的value值(一般是表单元素) 以上3个都是jquery类库中的语法 作用都是获得当前对象的value值(一般是表单元素) 只是,this.value是js的原生语法,$(this).val()是jquery的语法 使用this.value无需引入任何库文件,而$(this).val()则需要引入jquer

overflow: hidden用法,不仅仅是隐藏溢出

overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #div1{ width: 200px; /*height: 50px;*/ padding: 10px 20px 20px

Sublime Text 2 快捷键用法大全

Ctrl+D 选词 (反复按快捷键,即可继续向下同时选中下一个相同的文本进行同时编辑)Ctrl+G 跳转到相应的行Ctrl+J 合并行(已选择需要合并的多行时)Ctrl+L 选择整行(按住-继续选择下行)Ctrl+M 光标移动至括号内开始或结束的位置Ctrl+T 词互换Ctrl+U 软撤销Ctrl+P 查找当前项目中的文件和快速搜索:输入 @ 查找文件主标题/函数:或者输入 : 跳转到文件某行:Ctrl+R 快速列出/跳转到某个函数Ctrl+K Backspace 从光标处删除至行首Ctrl+K

Sublime Text 介绍、用法、插件等

Package Control 安装方法 首先通过快捷键 ctrl+` 或者 查看快捷键是否被占用,如被占用更快捷键,约在248行 Sublime Text 2 安装代码: import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.

overflow:hidden用法

1.当父元素设置了height值时,则设置overflow:hidden后,子元素超出父元素部分隐藏 2.当父元素的高度是靠子元素撑开的时候,子元素浮动时,则在父元素使用overflow: hidden可以清除浮动,使得父元素的高度依旧是靠子元素撑开. 作用1示例: <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>Ti

tableView特色用法

// //  ViewController.m //  UITableView // //  Created by yhj on 15/12/15. //  Copyright © 2015年 QQ:1787354782. All rights reserved. // #import "ViewController.h" #define APPW [[UIScreen mainScreen] bounds].size.width #define APPH [[UIScreen mai

CSS属性之 -- overflow

overflow可以实现隐藏超出对象内容,同时也有显示与隐藏滚动条的作用,overflow属性有四个值:visible (默认), hidden, scroll, 和auto.同样有两个overflow的类似属性overflow-y 和overflow-x. 定义 overflow : visible | auto | hidden | scroll 当然overflow可以单独设置X(overflow-x )和Y(overflow-y)方向的滚动条样式其值与应用与overflow语法用法结构相

css overflow(visible auto hidden scroll)教程

DIV CSS overflow (visible auto hidden scroll)语法结构与css overflow教程 Overflow可以实现隐藏超出对象内容,同时也有显示与隐藏滚动条的作用,接下来我们来了解学习css overflow样式.一.Overflow语法值 - TOP overflow : visible | auto | hidden | scroll 当然overflow可以单独设置X(overflow-x )和Y(overflow-y)方向的滚动条样式其值与应用与o

java中自带时间类用法实例 Date,Timestamp,DateFormat

我们将以Java自带的时间日期类和其中的处理函数进行分析. 一.与时间日期有关的类. java.util.Date.实现类,其对象具有时间.日期组件. java.util.Calendar.抽象类,其对象具有时间.日期组件. java.sql.Date.实现类,其对象具有日期组件. java.sql.Time.实现类,其对象具有时间组件. java.sql.Timestamp.实现类,其对象具有时间日期组件. java.text.DateFormat.抽象类,其对象格式化时间日期. 我们一般会使

CSS中的overflow属性

导读:overflow属性一般用来隐藏超过div范围的元素,包括不隐藏(visible),直接隐藏(hidden),用滚动条隐藏(scroll),自动(aotu)这四个属性.当然overflow的用法并不是如此简单的理解,在很多制作网页的场合我们都需要用overflow,本文介绍overflow的四种常用属性值以及使用. 根据CSS的盒模型概念,页面中的每个元素,都是一个矩形的盒子.这些盒子的大小.位置和行为都可以用CSS来控制.对于行为,我的意思是当盒子内外的内容改变的时候,它如何处理. 比如