在Web开发项目中，开发者会遇到由于客户需求、整体外观、资源有限等多种原因，需要在指定的空间内显示文本的情况，truncate属性是CSS 中的一个有效功能可以解决这个问题。
它使开发人员能够显示单行文本并用省略号截断溢出的文本。但是，根据具体情况，可能需要自定义截断文本的最大宽度。在本文中，我们将讨论如何使用 Primer CSS（一个由 GitHub 设计系统设计的流行开源 CSS 框架）来自定义最大宽度。
截断是什么意思？
在网页设计中，truncate是CSS的text-overflow属性的值之一。在处理文本时，经常会遇到容器不足以容纳文本的情况。这种文本称为溢出文本。它使我们能够显示一行文本，然后用省略号截断其余部分。
在CSS中，为了使用“截断”，你必须执行以下步骤 –
立即学习“前端免费学习笔记（深入）”；
将“white-space”属性设置为nowrap
将溢出属性设置为隐藏
将text-overflow属性设置为省略号
示例
div { width: 77%; height: 30px; border: 1px solid black; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } This is the text. Apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado pear.
为了避免这么多行代码，您可以使用 Primer CSS 来代替。 Primer CSS 内置了一个截断组件。它具有相同的预定义类。
在使用 Primer CSS 中的任何类之前，我们必须从 npm 安装它 –
npm install --save @primer/css
或在 HTML 代码中使用 CDN 链接 –
自定义截断文本的最大宽度
为了自定义截断文本的最大宽度，Primer CSS 提供了预定义的类，用于截断网站中溢出的文本。
示例
在此示例中，我们使用预定义的框类将 div 元素转换为可调整大小的框。这里，p-1是一个类简写，用于在框的所有边上添加 4px (0.25 rem) 的填充。
接下来，我们有 style 属性，用于将所需的样式添加到框中。我们将resize属性的值设置为horizontal，以便用户只需从右角拖动它即可水平调整框的大小。为了向元素添加水平滚动条，我们使用了“overflow:scroll”属性。使用水平滚动条将使用户能够在水平滚动文本时看到隐藏的内容。
然后，我们使用 Primer CSS 中的预定义类显示具有不同最大宽度的不同截断文本。
Primer CSS Truncate Custom Max Width
Following we have different truncated text with customized maximum widths.
结论
在内容溢出的情况下自定义显示文本的最大宽度是一种很好的做法，可以帮助开发人员控制网站上有限空间内的文本显示。按照本文讨论的方法，您将能够创建具有视觉吸引力的网站。我们在卡片设计中也可以使用截断方法。这使您的内容更具可读性和用户友好性，同时您必须显示长标题、标题、卡片描述等，
以上就是底漆 CSS 截断自定义最大宽度的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1625458.html
微信扫一扫 
支付宝扫一扫 
