CSS style solves the problem of displaying ellipsis when the text is too long

1. CSS style solves the problem of displaying ellipsis when text is too long

1. General style

Generally, in CSS styles, when the width is not enough, a line break effect may occur. This effect is definitely not acceptable at some times, and you can modify the CSS style to solve this problem.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>text-overflow</title>
        <link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
        <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
        <script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>
        <style type="text/css">
            .demo-split {
                width: 500px;
                height: 100px;
                border: 1px solid #dcdee2;
                background: palegreen;
            }

            .demo-split-pane {
                padding: 10px;
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div class="demo-split">
                <Split v-model="split">
                    <div slot="left" class="demo-split-pane">
                        Not using clip adaptive width</div>
                    <div slot="right" class="demo-split-pane">
                        Not using ellipsis adaptive width</div>
                </Split>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data() {
                return {
                    split: 0.4
                }
            }
        })
    </script>
</html>

The width on the left side becomes smaller and the text wraps.

The width on the right side becomes smaller and the text wraps.

2. The text is too long and displays ellipsis or truncation effect

【Usually written as:】

<style type="text/css">
    .test_demo_clip {
        text-overflow: clip;
        overflow: hidden;
        white-space: nowrap;
        width: 200px;
        background: palegreen;
    }

    .test_demo_ellipsis {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        width: 200px;
        background: palegreen;
    }
</style>

【illustrate:】
    text-overflow: indicates whether to display the ellipsis mark when the text overflows, ellipsis indicates the ellipsis effect, and clip indicates the clipping effect.
    overflow:hidden; Hide the overflowing text.
    white-space:nowrap; prohibits text wrapping.
    width: (optional) You can set a fixed value or set the display effect to adapt to the width.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>text-overflow</title>
        <link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
        <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
        <script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>
        <style type="text/css">
            .test_demo_clip {
                text-overflow: clip;
                overflow: hidden;
                white-space: nowrap;
                width: 200px;
                background: palegreen;
            }

            .test_demo_ellipsis {
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                width: 200px;
                background: palegreen;
            }

            .test_demo_defined_Width_clip {
                text-overflow: clip;
                overflow: hidden;
                white-space: nowrap;
                background: bisque;
            }
            
            .test_demo_defined_Width_ellipsis {
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                background: bisque;
            }

            .demo-split {
                width: 500px;
                height: 100px;
                border: 1px solid #dcdee2;
                background: palegreen;
            }

            .demo-split-pane {
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <h2>text-overflow : clip </h2>
            <div class="test_demo_clip">
                Do not display ellipsis marks, but simply crop bars</div>
            <br>

            <h2>text-overflow : ellipsis </h2>
            <div class="test_demo_ellipsis">
                When the text overflows the object, an ellipsis mark is displayed.
            <br>

            <h2>Custom width, adaptive size according to width</h2>
            <div class="demo-split">
                <Split v-model="split">
                    <div slot="left" class="demo-split-pane">
                        <div class="test_demo_defined_Width_clip">
                            Use clip adaptive width</div>
                    </div>
                    <div slot="right" class="demo-split-pane">
                        <div class="test_demo_defined_Width_ellipsis">
                            Use ellipsis adaptive width</div>
                    </div>
                </Split>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data() {
                return {
                    split: 0.4
                }
            }
        })
    </script>
</html>

clip shows the effect of cropping, and ellipsis shows the effect of ellipsis.

Summarize

The above is the CSS style that I introduced to you to solve the problem of displaying ellipsis when the text is too long. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!

<<: td content automatically wraps table table td after setting the width too much text automatically wraps

>>: Introduction to 10 Hooks in React

How to disable foreign key constraint checking in MySQL child tables

CSS style solves the problem of displaying ellipsis when the text is too long

1. CSS style solves the problem of displaying ellipsis when text is too long

1. General style

2. The text is too long and displays ellipsis or truncation effect

How to disable foreign key constraint checking in MySQL child tables

Installation and deployment of Linux tool Nethogs to monitor network bandwidth by process

Two ways to use react in React html

Application of mapState idea in vuex

Detailed explanation of the execution process of JavaScript engine V8

MySql uses skip-name-resolve to solve the problem of slow external network connection client

MySQL database transaction example tutorial

What is table partitioning and partitioning? MySql database partitioning and table partitioning method

Build a Docker private warehouse (self-signed method)

Analysis of Facebook's Information Architecture

Recommend

How to use Node.js to determine whether a png image has transparent pixels

Detailed steps to install Nginx on Linux

vue.config.js packaging optimization configuration

Using Zabbix to monitor the operation process of Oracle table space

MySQL online log library migration example

Solve the problem of the container showing Exited (0) after docker run

Detailed explanation of Docker data backup and recovery process

Solve the problem of yum installation error Protected multilib versions

Detailed explanation of Redis master-slave replication practice using Docker

Detailed explanation of the use of Gulp.js, a powerful tool for front-end task construction

How to set an alias for a custom path in Vue

Detailed explanation of the transition attribute of simple CSS animation

Some pitfalls of JavaScript deep copy

3 different ways to clear the option options in the select tag

HTML head tag detailed introduction