Original link: http://svgtrick.com/tricks/06af9fabf7e2ecfad24856416b024968
use CSS processing methods and techniques beyond the text is too long and unexpected - shared by a Master Ting Feng wood
In web development, a problem often encountered in some of the scenes in this Chinese content uncontrolled long exceeded, in order not to destroy the UI interface remains beautiful in design, we will need some truncation or other processing. This article on the text of the case beyond a method of this type did some summary, here's a look, for different scenarios we have a way to do what?
Button text and graphics issues
The figure is a button with the icon. Icon is on the right button, but also a little problem here is that when the length of time the button is not long enough, the button text will be superimposed on the icon, especially the buttons when the text is too long.
One solution is to set a sufficiently large button padding-right values:
.button {
padding-right: 50px;
}
As shown below:
Placeholder text
The usual solution is to put the text on the button below:
Name is too long
As shown above, in web development often encounter a problem with such long names. When the name is too long, it will destroy the whole UI interface visual experience.
This text on the left and right layout, the general practice is to use floating images were left floating, so the text will be on the right side of the picture. Of course, this is only valid in the case of the text is not long enough.
For this layout is more robust, may be added to a width of the two elements. Of course, there are better ways now, and that is the use of this property to flexbox layout.
English words too long
In the text often encounter problems in some words too long. On the large size of the device lacks the problem, but on the small size of the device, long words will destroy the beauty of the entire page.
There are two solutions:
Use the CSS word-break
.article-body p {
word-break: break-all;
}
By using the word-break attribute allows the browser to implement new line in any position.
Use text-overflow
Use text-overflow to truncate text. This method is used in the link text type is better for ordinary text recommended for word-break.
Read More link text
The figure is also a very common situation, especially being with a lot of text messages. Read more generally on the right link text, this method of layout of many, such as absolute positioning or floating.
There is a problem is that when the text is too long a title, the title will be superimposed on the link, affect the entire visual experience. It is recommended to use flexbox layout. So that when there is not enough space to put a link when the link text will automatically wrap the title is too long.
.header-2 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
You can go to this article to learn more about its usage under.
