


When 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.

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

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

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

1. Delete text When you click the text with the left mouse button, many neatly arranged white squares will appear around the text, which means that the [text/shape/graphic] has been selected. Once selected, the text can be easily deleted by simply pressing the [Delete] key on the keyboard. 2. The text or shape cannot be selected. After left-clicking [Text/Shape/Graph], the [Selected State] in step 1 does not appear. There are many reasons for this kind of problem. Take the master as an example, click the menu [View] on the screen, and find [Slide Master] in [Master View]. 3. In the master view, click on the left navigation page. After finding the [text/shape/graphic] that needs to be deleted, still click the left mouse button. After selecting, press [Delete] on the keyboard to delete.

CSS methods and techniques to achieve title text animation effects require specific code examples. In web design and development, animation effects can improve user experience and increase the appeal and vitality of the page. Title text animation effect is a common design technique, which can make the title of the page more vivid and interesting. This article will introduce some CSS methods and techniques to achieve title text animation effects, and provide specific code examples. Gradient animation effect The gradient animation effect can change the color of title text from one color to another, creating a smooth transition effect.

Use the <legend> tag to include a title. The HTML<legend> tag is used to define a title for the <fieldset> tag. It supports the following attributes − Attribute value description Aligntopbottomleftright Deprecated − Specifies content alignment. Example You can try running the following code to implement the <legend> tag in HTML −<!DOCTYPEhtml&g

Empire CMS title modification dilemma? Try these coping strategies! In the process of building a website using Empire CMS (EmpireCMS), it is inevitable that you will encounter the need to modify the article title. However, some users may encounter some difficulties, such as not knowing how to modify the title, or the title displaying abnormally after modification, etc. Today we will share some strategies to deal with these problems and provide specific code examples, hoping to help everyone solve the title modification dilemma. 1. Modify the title of a single article If you want to modify the title of a certain article

Technical Selection and Architecture Design of Java Interface with Baidu AI Interface 1. Introduction With the rapid development of artificial intelligence technology, Baidu AI interface provides a variety of capabilities, such as face recognition, speech recognition, text recognition, etc. This article will introduce the technology selection and architecture design of connecting Baidu AI interface in Java projects, and demonstrate the specific implementation method with code examples. 2. Technology Selection HttpClient Since Baidu AI interface communicates through HTTP protocol, we can use ApacheHttp

In a digital world saturated with information, headlines play a vital role in determining whether your audience will click on your content. A good title not only grabs attention but also improves your content’s ranking in the search engine results pages (SERPs). Follow these tips to create the uncrowned king who rules the title kingdom: Follow SEO best practices: Include relevant Include what your target audience is searching for in your title, which will help your content appear in relevant search results. Keep it short and sweet: The title should be short and easy to understand, usually under 60 characters. Use powerful verbs: Use powerful and engaging verbs to convey action and urgency. Attract attention: Ask questions: Starting with a question can spark curiosity and encourage

Before solving the problem that the title of the Imperial CMS website cannot be modified, we need to first understand the cause of this problem. Generally speaking, the website title of Imperial CMS cannot be modified due to the following common reasons: The website title variable is not called correctly in the template. A caching issue prevents the title from being updated in a timely manner. Plug-in conflict causes title modification to be invalid. In response to the above problems, we can take the following methods to troubleshoot and solve them one by one: Check whether the website title variable is correctly called in the template: In Imperial CMS, the website title usually passes

Ajax is a web development technology based on JavaScript and XML, which can realize asynchronous loading of data, partial page refresh and other functions. Before using ajax, we need to understand which packages are necessary and know how to use them to achieve the functions we want. This article will introduce some commonly used ajax packages and provide corresponding code examples to help readers better understand and apply ajax technology. jQueryjQuery is a powerful JavaScript library that provides a wealth of
