Html long text automatically cuts off when it exceeds the tag width

When we display long text, we often need to intercept characters on the C# side, but this is definitely not a good thing, because our long text is often represented by HTML tags. If you don't load it properly, garbled characters will appear (half of the HTML tag will appear). A better way is to implement this function through CSS.
When the span tag exceeds the limit, it will automatically wrap the content.

Copy code

The code is as follows:

white-space:nowrap;white-space:norma;display:inline-block;

If the line exceeds the auto-hidden area, it will not be displayed in a row (must be in a block element)

Copy code

The code is as follows:

overflow:hidden;white-space:nowrap;

If you want to add a ... after the text, you can use text-overflow: ellipsis; most mainstream browsers support this attribute

Copy code

The code is as follows:

.tbconxx {
float: left;
width: 255px;
padding: 5px 10px;
}
.tbconxx li,tbconxx span {
padding-left: 7px;
text-overflow: ellipsis;
overflow: hidden;
display: block;
white-space: nowrap;
width: 240px;
}

This will automatically hide the text that exceeds the limit.

A brief discussion on Nginx10m+ high concurrency kernel optimization

Blog

Html long text automatically cuts off when it exceeds the tag width

CocosCreator classic entry project flappybird

A brief discussion on Nginx10m+ high concurrency kernel optimization

Detailed explanation of the use of the clip-path property in CSS

SQL serial number acquisition code example

Practical basic Linux sed command example code

How to handle token expiration in WeChat Mini Programs

Introduction to the use of form OnSubmit and input type=image

How to handle spaces in CSS

Build a WebRTC video chat in 5 minutes

LINUX Checks whether the port is occupied

Recommend

MySQL Billions of Data Import, Export and Migration Notes

How to solve the problem of Ubuntu 18.04 looping login/stuck on the boot interface/unable to enter the graphical interface

How to monitor Linux server status

CSS3 realizes particle animation effect when matching kings

How to make a div height adaptive to the browser height

mysql-canal-rabbitmq installation and deployment super detailed tutorial

Detailed explanation of the payment function code of the Vue project

MySQL 5.7.21 winx64 installation and configuration method graphic tutorial under Windows 10

js uses FileReader to read local files or blobs

Detailed analysis of classic JavaScript recursion case questions

How to clear mysql registry

How to bind domain name to nginx service

Implementing a simple calculator with javascript

Implementing a shopping cart with native JavaScript

XHTML Getting Started Tutorial: XHTML Hyperlinks