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
Solve the black screen problem after VMware installs Linux system and starts
1. Installation environment 1. HUAWEI mate x cpu ...
Solve the problem of HTML automatic formatting after saving in vscode
The version of vsCode has been updated in recent ...
Master the commonly used HTML tags for quoting content in web pages
Use blockquote for long citations, q for short ci...
Detailed explanation of component development of Vue drop-down menu
This article example shares the specific code for...
Implementation script for scheduled database backup in Linux
Table of contents Scenario: The server database n...
How to encapsulate the table component of Vue Element
When encapsulating Vue components, I will still u...
Detailed explanation of Docker Secret management and use
1. What is Docker Secret 1. Scenario display We k...
Analysis of the differences between Iframe and FRAME
1. Use of Iframe tag <br />When it comes to ...
What to do if you forget your mysql password
Solution to forgetting MySQL password: [root@loca...
MySQL Series 11 Logging
Tutorial Series MySQL series: Basic concepts of M...
Example of nginx ip blacklist dynamic ban
When a website is maliciously requested, blacklis...
6 ways to implement the maximum and minimum values of an array in javascript
Given an array [1,8,5,4,3,9,2], write an algorith...
What magical uses does CSS filter have
background Basic Concepts CSS filter property app...
Write a formal blog using XHTML CSS
The full name of Blog should be Web log, which me...
Docker Modify Docker storage location Modify container image size limit operation
This seems to be no longer possible with the new ...