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.

Common methods of Vue componentization: component value transfer and communication

Blog

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

Web Design: When the Title Cannot Be Displayed Completely

Optimizing query speed of MySQL with tens of millions of data using indexes

Docker installation and configuration steps for RabbitMQ

5 ways to make your JavaScript codebase cleaner

Solution to ES memory overflow when starting docker

MySQL 8.0.19 installation detailed tutorial (windows 64 bit)

Common methods of Vue componentization: component value transfer and communication

Solutions to the Problem of Creating XHTML and CSS Web Pages

Detailed explanation of the difference between chown and chmod commands in Linux

Detailed tutorial on installation and configuration of nginx under Centos7

Recommend

Example of troubleshooting method to solve Nginx port conflict

Sample code for a large drop-down menu implemented in pure CSS

Differentiate between null value and empty character ('') in MySQL

Example code for implementing a QR code scanning box with CSS

Summary of 4 methods of div+css layout to achieve 2-end alignment of css

Detailed explanation of HTML body tag and commonly used control tags in HTML

Mini Program Custom TabBar Component Encapsulation

Appreciation of the low-key and elegant web design in black, white and gray

JS Easy to understand Function and Constructor

MySql Group By implements grouping of multiple fields

In-depth understanding of CSS @font-face performance optimization

VMware 15.5 version of the graphic tutorial to build a yum warehouse by mounting the system CD

How to use shell scripts in node

How to monitor mysql using zabbix

Sample code for making a drop-down menu using pure CSS