search
HomeWeb Front-endCSS TutorialWhen the title cannot display the complete solution_Experience exchange

In fact, it is recommended to use css to control the hidden display

That is, the title is not fully displayed due to the width of the design. It seems that a program is used to truncate the text. I think many websites encounter this situation. For visual effects, truncated display has to be performed to meet the overall visual effect of the website. Usually we use two methods of truncation. One is to set a certain number of characters in advance during background output. The other is to use CSS or JS to visually clip the complete content that has been output.

When web standards did not rise, the first method was basically used to solve this problem. This method is still widely used until now. The advantage of this method is that it can accurately cut the number of words, but the disadvantage may be that the output content is incomplete because the cutting work has been completed in the background. The second type is a deception made through CSS or JS. Hide content beyond a certain length. In order to achieve the required visual effects, the advantage is that it can retain the complete data content. The disadvantage may be that the text intercepted by non-IE browsers is not perfect. For example, Firefox often has the embarrassing phenomenon of truncating half a word.

The question I want to ask is: "Will the incompleteness of the title affect the user's motivation to click?" I boldly make this conclusion: The incompleteness of the title will affect whether the user will click to a large extent. The motivation for the message. Here we use a news headline from Youai.com for analysis. There is a news headline on the website, "The United States Invents New User Interface Technology and Blows It", which is a mechanically cut-off headline. Whether our curiosity is piqued by such a title, of course it is possible. But our understanding may be this: "The United States has invented a new user interface technology, and they are bragging about it... This is anti-fake news. It may be that the two companies are bragging." If this is the case, then I will not hear such gossip news. Interested. However, the complete title should be: "The United States invented a new user interface technology that can operate a computer by blowing on it." I am more interested in such a title. I want to know why this can operate a computer by blowing on it. This is me Something I never thought of. In this way, I will be very interested in clicking to view this news. We can compare and find that the thing that arouses our curiosity the most is actually the "blowing operation". This is the core of the new technology. This is also the core content of this news.

Of course, sometimes truncation is necessary, otherwise the entire website will look very cluttered. So now the general solution is to add the "title" attribute to the link. When encountering such a title with unclear semantics, I usually hover the mouse to view the text in the prompt area to obtain more complete title information. This completes the judgment of whether I click on the news. But it is a pity that the title attribute in the title link of Youai.com is the same as the title content, so the meaning of the title attribute is greatly reduced.

When designing, of course we try to display the title as completely as possible. If it cannot be displayed completely due to special needs, we must try to make the title attribute as complete as possible.Also, although CSS truncation is flawed in Firefox, I still think truncation should be done by CSS. At least this way we can get a complete HTML information document. When there is no CSS, at least we can still see the complete information content.

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Anchor Positioning Just Don't Care About Source OrderAnchor Positioning Just Don't Care About Source OrderApr 29, 2025 am 09:37 AM

The fact that anchor positioning eschews HTML source order is so CSS-y because it's another separation of concerns between content and presentation.

What does margin: 40px 100px 120px 80px signify?What does margin: 40px 100px 120px 80px signify?Apr 28, 2025 pm 05:31 PM

Article discusses CSS margin property, specifically "margin: 40px 100px 120px 80px", its application, and effects on webpage layout.

What are the different CSS border properties?What are the different CSS border properties?Apr 28, 2025 pm 05:30 PM

The article discusses CSS border properties, focusing on customization, best practices, and responsiveness. Main argument: border-radius is most effective for responsive designs.

What are CSS backgrounds, list the properties?What are CSS backgrounds, list the properties?Apr 28, 2025 pm 05:29 PM

The article discusses CSS background properties, their uses in enhancing website design, and common mistakes to avoid. Key focus is on responsive design using background-size.

What are CSS HSL Colors?What are CSS HSL Colors?Apr 28, 2025 pm 05:28 PM

Article discusses CSS HSL colors, their use in web design, and advantages over RGB. Main focus is on enhancing design and accessibility through intuitive color manipulation.

How can we add comments in CSS?How can we add comments in CSS?Apr 28, 2025 pm 05:27 PM

The article discusses the use of comments in CSS, detailing single-line and multi-line comment syntaxes. It argues that comments enhance code readability, maintainability, and collaboration, but may impact website performance if not managed properly.

What are CSS Selectors?What are CSS Selectors?Apr 28, 2025 pm 05:26 PM

The article discusses CSS Selectors, their types, and usage for styling HTML elements. It compares ID and class selectors and addresses performance issues with complex selectors.

Which type of CSS holds the highest priority?Which type of CSS holds the highest priority?Apr 28, 2025 pm 05:25 PM

The article discusses CSS priority, focusing on inline styles having the highest specificity. It explains specificity levels, overriding methods, and debugging tools for managing CSS conflicts.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),