


Detailed explanation of several CSS tips for processing long and short text content (worth collecting)
This article will share with you some CSS tips for handling short content and long content. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.
When we use CSS to build layouts, it is important to consider the long and short text content. If we can clearly know what needs to be done when the text length changes, we can avoid many unnecessary mistakes. question.
In many cases, adding or removing a word can change the look of the UI, or worse, it can break the original design, making it inaccessible. In my early days of learning CSS, I underestimated the power of adding or removing a word. In this article, I’ll introduce a few different techniques that you can use right away to handle text of varying lengths in CSS.
Question
Before discussing the techniques for handling text content, let’s first explain the problem. Suppose we have a vertical navigation.
#The length of the name can vary, especially if you are working on a multilingual website. In the example above, as the name gets longer, it is wrapped to the second line. Here are some questions
Should this text be truncated
Should it be replaced with multiple lines? If so, how many lines can be wrapped at most?
This case has more words than expected, but what happens when a word is too long? By default, it will overflow its container.
#As a professional front-end developer, it is important to determine what to do in this situation. Fortunately, there are some CSS properties specifically designed to solve this problem.
Beyond that, the problem isn’t just with long content, short content can also break the UI, or at least make it look weird. As in the example below
the width of the button with ok
text is very small. I'm not saying this is a fatal issue, but it can make the buttons look weak or hard to notice.
What should we do in this situation? Maybe set min-width
on the button? Provides a safe width regardless of content length.
Long Content
Now that you have some idea of the problem, let’s delve into CSS techniques that can provide solutions for handling long content.
overflow-wrap
CSS property overflow-wrap
is used to indicate when a string that cannot be separated is too long to fill it. When wrapping a box, to prevent it from overflowing, does the browser allow such words to break newlines.
Hyphens
CSS property hyphens
tells the browser how to use hyphens to connect words when wrapping. You can prevent the use of hyphens entirely, you can control when the browser uses them, or you can let the browser decide when to use them.
.element { hyphens: auto; }
Text truncation processing
Truncation means adding a dot to the end of a sentence to indicate that there is more text content.
There is no text-truncation
attribute or anything, but it has some CSS properties mixed in that do the job for us.
.element { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
Multi-line text truncation processing
If you want to truncate multiple lines, you can use the line-clamp
attribute.
.element { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
For this to work, display: -webkit-box
must be used. -webkit-line-clamp
Specifies the maximum number of lines for truncation work.
The disadvantage of this technique is that it can easily fail if you want to add padding
to the element. When padding
is added, it causes part of the next line to be displayed, which should be truncated. See the image below:
Horizontal Scroll
Sometimes, truncating or concatenating a word is not always possible. For example, JavaScript code can become difficult to read when a long word is replaced by a new line. In this case, horizontal scrolling will make the reading experience better.
Padding
在某些情况下,大家可能会忘记添加padding
,直到我们注意到一个视觉问题。考虑以下问题:
这里有一个复选框列表,其中有一个非常接近它的兄弟项。发生这种情况的原因是网格上没有间距。这是来自Techcrunch网站的一个真实的例子。
短内容
这对大家来说并不常见,但在设计和构建UI时,也是一个要重要考虑的事项。
设置一个最小宽度
回到本文开头向大家展示的一个示例。 我们要如何增强它并使按钮看起来更好?
我们可以通过在按钮上添加min-width
来解决此问题,这样一来,它就不会低于该宽度。
现在大家已经对问题及其解决方案有了一定的了解,我们来探索web上的一些用例和示例。
用例和示例
个人资料卡
这是长内容的常见示例。 很难预测名称的长度。 我们应该如何应对呢?
/* 方案1 */ .card__title { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } /* 方案2 */ .card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
导航项
在处理多语言布局时,内容长度会发生变化。考虑以下示例
LTR(从左到右)的导航项About
比RTL(从右到左)的导航项大。在RTL中,项目看起来太小了。可点击区域太小不利于用户体验。我们能做什么?在这种情况下,最好为导航项设置最小宽度。
.nav__item { min-width: 50px; }
文章内容
一个长词或一个链接是很常见的,尤其是在手机上。考虑以下
上面有一个很长的单词,它会上容器溢出导致水平滚动。我们可以通过使用overflow-wrap
或hyphens
来解决这个问题。
.article-content p { overflow-wrap: break-word; }
购物车
产品名可以从一个单词到多行不等。在本例中,由于没有在它们之间添加足够的间距,产品名称太接近删除按钮。
这个解决方案可以通过添加padding
或margin
来实现,这取决于你们的上下文,为了简单起见,这里使用margin
解决方案。
.product__name { margin-right: 1rem; }
Flexbox和长内容
flexbox
和长内容会发生某种行为,从而导致元素溢出其父元素。 考虑以下示例:
html
<p> </p><p> </p><h3 id="Ahmad-Shadeed">Ahmad Shadeed</h3> <button>Follow</button>
css
.user { display: flex; align-items: flex-start; } .user__name { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
然而,当内容很长时,这就不起作用了。文本将溢出它的父文件。
原因是 flex 项不会收缩到其最小内容大小以下。为了解决这个问题,我们需要在flex
项目.user__meta
上设置min-width: 0
。
.user__meta { /* other styles */ min-width: 0; }
总结
我希望智米们已经学会了处理CSS中短内容和长内容的不同技巧。我很喜欢这篇文章,因为它帮助我记住了一些小细节,这对未来的项目会很有帮助。
原文地址:https://isheed.com/article/css-short-long-connt/
作者:shadeed
译文地址:https://segmentfault.com/a/1190000038665888
译者:前端小智
更多编程相关知识,请访问:编程入门!!
The above is the detailed content of Detailed explanation of several CSS tips for processing long and short text content (worth collecting). For more information, please follow other related articles on the PHP Chinese website!

CSS Grid is a powerful tool for creating complex, responsive web layouts. It simplifies design, improves accessibility, and offers more control than older methods.

Article discusses CSS Flexbox, a layout method for efficient alignment and distribution of space in responsive designs. It explains Flexbox usage, compares it with CSS Grid, and details browser support.

The article discusses techniques for creating responsive websites using CSS, including viewport meta tags, flexible grids, fluid media, media queries, and relative units. It also covers using CSS Grid and Flexbox together and recommends CSS framework

The article discusses the CSS box-sizing property, which controls how element dimensions are calculated. It explains values like content-box, border-box, and padding-box, and their impact on layout design and form alignment.

Article discusses creating animations using CSS, key properties, and combining with JavaScript. Main issue is browser compatibility.

Article discusses using CSS for 3D transformations, key properties, browser compatibility, and performance considerations for web projects.(Character count: 159)

The article discusses using CSS gradients (linear, radial, repeating) to enhance website visuals, adding depth, focus, and modern aesthetics.

Article discusses pseudo-elements in CSS, their use in enhancing HTML styling, and differences from pseudo-classes. Provides practical examples.


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

SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

Atom editor mac version download
The most popular open source editor

SublimeText3 Chinese version
Chinese version, very easy to use

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
