针对英文&&数字&&中文通用，文本溢出显示省略号

电玩女神 2023-06-10 03:24 16阅读 0赞

overflow:hidden;white-space:normal;word-break:break-all;text-overflow:ellipsis

<!doctype html>  
<html class="no-js" lang="">

<head>  
  <meta charset="utf-8">  
  <title></title>  
  <meta name="description" content="">  
  <meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="manifest" href="site.webmanifest">  
  <link rel="apple-touch-icon" href="icon.png">

<link rel="stylesheet" href="css/normalize.css">  
  <link rel="stylesheet" href="css/main.css">

<meta name="theme-color" content="\#fafafa">  
  <style>  
    @media screen and (max-width: 700px)\{  
      .demo\{  
        border: 1px solid \#000000;  
        width: 50px;  
        height: 20px;  
        overflow:hidden;  
        text-overflow:ellipsis;  
        word-break:break-all;  
        white-space:nowrap;  
        margin: 0 auto;  
      \}  
      body\{  
        background-color: red;  
      \}  
    \}  
    @media screen and (max-width: 500px)\{  
      .demo\{  
        border: 1px solid \#000000;  
        width: 50px;  
        height: 20px;  
        overflow:hidden;  
        word-break:break-all;  
        text-overflow:ellipsis;  
        white-space:nowrap;  
        margin: 0 auto;  
      \}  
      body\{  
        background-color: blueviolet;  
      \}  
    \}  
  </style>  
</head>

<body>

<p>Hello world! This is HTML5 Boilerplate.</p>  
  <div class="demo">啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</div>

</body>

</html>

发表评论取消回复

表情：

评论列表（有 0 条评论，16人围观）

还没有评论，来说两句吧...

相关阅读

相关文本溢出显示省略号

必须联合使用 overflow: hidden; text-overflow: ellipsis; 文本溢出隐藏为省略号 display: -webkit-box;

野性酷女/ 2023年07月25日 12:44/ 0 赞/ 35 阅读

相关针对英文&&数字&&中文通用，文本溢出显示省略号

overflow:hidden;white-space:normal;word-break:break-all;text-overflow:ellipsis <!doc

电玩女神/ 2023年06月10日 03:24/ 0 赞/ 17 阅读

相关 CSS文本溢出显示省略号

单行（方法一） overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 单行（方法

Myth丶恋晨/ 2023年01月04日 10:28/ 0 赞/ 274 阅读

相关 css文本溢出显示省略号

文本溢出处理 `单行`文本 overflow:hidden; text-overflow:ellipsis; white-space:now

r囧r小猫/ 2022年12月24日 11:58/ 0 赞/ 272 阅读

相关 CSS设置文本溢出显示省略号

单行文本 ![在这里插入图片描述][20210708103956946.png] overflow: hidden; text-overflow: el

小鱼儿/ 2022年10月18日 12:59/ 0 赞/ 244 阅读

相关文本溢出显示省略号

一、单行文本溢出显示省略号（...）设置块元素的宽和高，然后使用三个属性（缺一不可）控制 overflow: hidden; text-overflow:e

旧城等待，/ 2022年08月05日 20:29/ 0 赞/ 247 阅读

相关文本溢出显示省略号

文本溢出隐藏问题： 1）、多行文本溢出显示省略号 word-break: break-all; display: -webkit-box;

àì夳堔傛蜴生んèń/ 2022年05月09日 03:58/ 0 赞/ 312 阅读

相关 CSS文本溢出显示省略号

1单行 overflow:hidden; text-overflow:ellipsis; white-space:nowrap

缺乏、安全感/ 2022年04月23日 04:08/ 0 赞/ 321 阅读

相关溢出文本显示省略号

单行文本溢出显示省略号需要文本定宽，overflow设置溢出文本不显示，white-space处理元素内的空白，这里是设置不换行，text-overflow设置文本溢出时的

痛定思痛。/ 2022年04月02日 10:54/ 0 赞/ 355 阅读

相关 CSS文本溢出显示省略号

单行语法 overflow:hidden; text-overflow:ellipsis; white-space:nowrap 示例

红太狼/ 2021年01月27日 16:34/ 0 赞/ 819 阅读