css文字超出显示省略号

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

例子:

DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>title>
        <style>
            div {
                margin:0 auto ;
                width:300px;
                color: red;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        style>
    head>

    <body>
        <div>单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略div>
    body>

html>

结果:

在这里插入图片描述

多行:
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

css文字超出显示省略号_第1张图片

参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-line-clamp

例子:

DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>title>
        <style>
            div {
                margin: 0 auto;
                width: 300px;
                color: red;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
            }
        style>
    head>

    <body>
        <div>多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略div>
    body>

html>
结果:

在这里插入图片描述

你可能感兴趣的:(前端开发,css3)