Shulou(Shulou.com)06/02 Report--

This article shows you how to solve the problem when the title can not be displayed completely in web design. The content is concise and easy to understand, which can definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Today, I just saw the newly revised website of ChinaUI.com. I think Youai is becoming more and more beautiful. This time the change is really quite big. After a rough look at it in the morning, I turned it off, and then I found a problem when I opened it in the evening. That is, the title is not displayed because of the width of the design, so it seems to use the program to truncate the word. I think a lot of websites are in this situation. For the visual effect, we have to make a truncated display to meet the overall visual effect of the website. Usually we use two methods of word truncation, one is to set a certain number of characters in advance through the background output. The other is to use CSS or JS to visually truncate the complete content that has been output.

In the absence of web standards, the first way was basically adopted to solve this problem, which is still widely used today. The advantage of this method is that it can accurately cut the number of words, but the deficiency may be because the cutting work has been completed in the background, so the output is incomplete. The second is a cover-up made through CSS or JS. Hide content beyond a certain length. In order to achieve the desired visual effects, the advantage is that he can retain the complete data content, and the deficiency may be that the words truncated by non-IE browsers are not perfect. For example, Firefox often has the embarrassment of truncating half a word.

The question I want to ask is: "will the incompleteness of the title affect the user's click motivation?" I venture to conclude that the incompleteness of the title will affect the user's motivation to click on the message to a large extent. Here we will use a news title in Youai net to make an analysis. There is a headline on the website, "the United States invents new technologies for user interfaces," which is a mechanically truncated headline. In the face of such a title, it is of course possible whether our curiosity is aroused. But our understanding may be like this: "the United States has invented a new technology for the user interface."... this is anti-fake news. It could be two companies bragging. " If that's the case, then I'm not interested in this kind of gossip. However, the complete title should be: "the United States invents new user interface technology to operate computers by blowing." I am more interested in such a title. I want to know why this blow can operate the computer. This is something I never thought of. In this way, I will have great interest in clicking to view this news. We can find that what arouses our curiosity most easily is the "blowing operation". This is the core of new technology. It is also the core content of this news.

Of course, sometimes word truncation is necessary, otherwise the whole site will look very messy. So now the general solution is to add the "title" attribute to the link. When I encounter this kind of title with unclear semantics, I usually hover over the mouse to look at the text in the prompt area to get more complete title information. To complete my judgment of whether to click on the news or not. But it is a pity that the title attribute in the title link of Youai is the same as the title content, so the meaning of the title attribute is greatly reduced.

Of course, when we design, we should display the title as completely as possible, and if we can't display it completely because of special needs, we should make the title attribute as complete as possible. And although the truncation of CSS is flawed in Firefox, I still think the 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 see the complete information content.

The above content is how to solve the problem when the title can not be displayed completely in web design. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.