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 long1. General styleGenerally, 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! |
>>: Introduction to 10 Hooks in React
Recommend
NULL and Empty String in Mysql
I recently came into contact with MySQL. Yesterda...
Vuex combines session storage data to solve the problem of data loss when refreshing the page
Table of contents Preface 1. Reasons: 2. Solution...
Mysql uses stored procedures to quickly add millions of data sample code
Preface In order to reflect the difference betwee...
Tutorial on installing MySQL8 compressed package version on Win10
1 Download MySQL8 from the official website and i...
Summary of some thoughts on binlog optimization in MYSQL
question Question 1: How to solve the performance...
Detailed analysis of several situations in which MySQL indexes fail
1. Leading fuzzy query cannot use index (like ...
Use of Linux usermod command
1. Command Introduction The usermod (user modify)...
Detailed explanation of server-id example in MySQL master-slave synchronization
Preface When we build a MySQL cluster, we natural...
Implementation steps of vue-element-admin to build a backend management system
Recently, when I was working on a conference heal...
Summary of three rules for React state management
Table of contents Preface No.1 A focus No.2 Extra...
Detailed graphic explanation of sqlmap injection
Table of contents 1. We found that this website m...
Detailed tutorial on integrating Apache Tomcat with IDEA editor
1. Download the tomcat compressed package from th...
WeChat applet uses canvas to draw clocks
This article shares the specific code of using ca...
Usage of Linux userdel command
1. Command Introduction The userdel (user delete)...
How to simulate network packet loss and delay in Linux
netem and tc: netem is a network simulation modul...