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.

CSS achieves the effect of changing the color of the entire line when the mouse is placed on it

Blog

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

Example of ellipsis when CSS multi-line text overflows

CSS achieves the effect of changing the color of the entire line when the mouse is placed on it

Detailed tutorial for installing mysql 8.0.12 under Windows

Understanding v-bind in vue

Detailed explanation of daily_routine example code in Linux

Detailed explanation of Linux Namespace User

Analysis of the implementation method of modifying the default network segment of Docker

Vue implements adding, displaying and deleting multiple images

Detailed explanation of MySQL combined index and leftmost matching principle

Mysql experiment: using explain to analyze the trend of indexes

Recommend

Example of converting spark rdd to dataframe and writing it into mysql

jQuery achieves seamless scrolling of tables

How to enable TLS and CA authentication in Docker

JavaScript using Ckeditor + Ckfinder file upload case detailed explanation

Detailed explanation of referential integrity in SQL (one-to-one, one-to-many, many-to-many)

Toolkit: A more powerful front-end framework than Bootstrap

Installation and use of mysql mycat middleware

Solution to the problem that the Vue page image does not display

How to reduce the memory and CPU usage of web pages

A summary of the knowledge points of database indexing. Everything you need to know is here.

A brief discussion on using Cartesian product principle to query multiple tables in MySQL

Vue uses filters to format dates

MySQL practical window function SQL analysis class students' test scores and living expenses

How to hide and remove scroll bars in HTML

Detailed explanation of JavaScript Promise and Async/Await