Project scenario:
The front-end style is too long to display...but it is misaligned
solution:
What is said on the Internet is: The essence is that the element alignment is based on the baseline by default. Since the first span contains text, the baseline is at the bottom area of the text and the adjacent span, resulting in misalignment. You can set span{vertical -align: top;} Just unify the alignment.
<span style="margin-right:31px;padding-left:18px;">项目名称</span>
<span class="project-name-style" :title="projectInfo.name">{
{
projectInfo.name}}</span>
.project-name-style{
display: inline-block;
width: 360px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
}
illustrate:
1. The width must be set and can be adjusted according to actual needs.
2. white-space: nowrap prohibits text wrapping.
3. Text-overflow indicates whether to display an omission mark when the text overflows. It has two values:
clip: Do not display the omission mark (...), but simply crop.
ellipsis: Displays an ellipsis mark (…) when the text within an object overflows
4. overflow:hidden means that the overflow content is hidden.
5. vertical-align: top; display it in one line.