{"id":2198,"date":"2023-09-05T11:35:34","date_gmt":"2023-09-05T04:35:34","guid":{"rendered":"https:\/\/dev.artru.io.vn\/?p=2198"},"modified":"2023-11-12T12:36:34","modified_gmt":"2023-11-12T05:36:34","slug":"gioi-han-do-dai-van-ban-den-n-dong-bang-css","status":"publish","type":"post","link":"https:\/\/artru.net\/en\/gioi-han-do-dai-van-ban-den-n-dong-bang-css\/","title":{"rendered":"Limit text length to N lines with CSS"},"content":{"rendered":"<h2 class=\"wp-block-heading\">Use -webkit-line-clamp<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">During web development, sometimes we need to limit the text length or limit the number of lines displayed in a paragraph of text.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">One of the common methods to limit the number of lines displayed in a paragraph of text is to use attributes <code data-no-translation=\"\" data-no-auto-translation=\"\">-webkit-line-clamp<\/code>. This property allows us to specify the maximum number of lines the text should display.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To use this method, we need to specify the following properties for the text element we want to limit:<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-translation=\"\" data-no-auto-translation=\"\"><code data-no-translation=\"\" data-no-auto-translation=\"\">div {\n  display: -webkit-inline-box;\n  overflow: hidden;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code data-no-translation=\"\" data-no-auto-translation=\"\">display: -webkit-inline-box<\/code>: Converts the text element to an inline-box. This helps ensure that the text will be displayed in a single line.<\/li>\n\n\n\n<li><code data-no-translation=\"\" data-no-auto-translation=\"\">overflow: hidden<\/code>: Hides cut off lines of text.<\/li>\n\n\n\n<li><code data-no-translation=\"\" data-no-auto-translation=\"\">-webkit-line-clamp: 2<\/code>: Specifies the maximum number of lines the text should display. Specifically, here are 2 lines.<\/li>\n\n\n\n<li><code data-no-translation=\"\" data-no-auto-translation=\"\">-webkit-box-orient: vertical<\/code>: Converts an inline-box to a vertical box. This helps ensure that the text will be displayed vertically.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">For example, limit text paragraphs to <code data-no-translation=\"\" data-no-auto-translation=\"\">&lt;div&gt;<\/code> there are two lines. If the text is longer than 2 lines, it will be cut and inserted before the 3 dots &quot;...&quot;.<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"zYyKVWp\" data-user=\"artrublog\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/artrublog\/pen\/zYyKVWp\" target=\"_blank\" rel=\"noopener\">\n  Limit text length to N lines<\/a> by ARTRU (<a href=\"https:\/\/codepen.io\/artrublog\" target=\"_blank\" rel=\"noopener\">@artrublog<\/a>) on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Advantages of the webkit-line-clamp method<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This method is very simple and easy to use.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This method can be used to limit the number of lines displayed in any piece of text, regardless of the width or height of that text element.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Disadvantages of webkit-line-clamp method<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Properties <code data-no-translation=\"\" data-no-auto-translation=\"\">-webkit-line-clamp<\/code> Not fully 100% compatible across browsers. However, major browsers still support it.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"492\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/09\/Trinh-duyet-tuong-thich-webkit-line-clamp.png\" alt=\"Browser compatible -webkit-line-clamp\" class=\"wp-image-2224\"\/><figcaption class=\"wp-element-caption\">Browser compatible -webkit-line-clamp<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">This method may not work correctly on browsers with small default font sizes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclude<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Method <code data-no-translation=\"\" data-no-auto-translation=\"\">-webkit-line-clamp<\/code> is an effective method to limit the number of lines displayed in a paragraph of text. This method is relatively simple and easy to use, and can be applied to any text element.<\/p>","protected":false},"excerpt":{"rendered":"<p>S\u1eed d\u1ee5ng -webkit-line-clamp Trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n web, \u0111\u00f4i khi ch\u00fang ta c\u1ea7n gi\u1edbi h\u1ea1n \u0111\u1ed9 d\u00e0i v\u0103n b\u1ea3n hay gi\u1edbi h\u1ea1n s\u1ed1 l\u01b0\u1ee3ng d\u00f2ng hi\u1ec3n th\u1ecb trong m\u1ed9t \u0111o\u1ea1n v\u0103n b\u1ea3n. M\u1ed9t trong nh\u1eefng ph\u01b0\u01a1ng ph\u00e1p ph\u1ed5 bi\u1ebfn \u0111\u1ec3 gi\u1edbi h\u1ea1n s\u1ed1 l\u01b0\u1ee3ng d\u00f2ng hi\u1ec3n th\u1ecb trong m\u1ed9t \u0111o\u1ea1n v\u0103n b\u1ea3n l\u00e0 s\u1eed [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2221,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[113],"tags":[],"class_list":["post-2198","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"_links":{"self":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts\/2198","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/comments?post=2198"}],"version-history":[{"count":0,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts\/2198\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/media\/2221"}],"wp:attachment":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/media?parent=2198"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/categories?post=2198"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/tags?post=2198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}