HTML中限制字数显示

2023年6月20日发(作者：)

HTML中限制字数显⽰HTML中限制字数显⽰，超出部分使⽤省略号显⽰在HTML中，为了保证页⾯整洁，需要隐藏超出部分的⽂本，例如列表项、标题等。如下为⼏种解决⽅法：代码实现⽂字只允许显⽰⼀⾏，省略超出部分，显⽰“…”在CSS⽂件中可以添加下述公共样式：.line-limit-length { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; //⽂本不换⾏，这样超出⼀⾏的部分被截取，显⽰...}在HTML中可以使⽤该样式：

给容器限制宽度，超出部分省略在CSS⽂件中添加下述：.product-buyer-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}使⽤⽅法和上⼀种⼀样。显⽰效果显⽰效果⼤致如下，该效果是美化后的显⽰效果：总结及进阶归纳起来设置的样式参数主要是三个：overflow: ⽤于控制内容溢出元素框时显⽰的⽅式。text-overflow: 确定如何向⽤户发出未显⽰的溢出内容信号。white-space: ⽤来设置如何处理元素中的空⽩。overflowCSS overflow 属性⽤于控制内容溢出元素框时显⽰的⽅式；可以控制内容溢出元素框时在对应的元素区间内添加滚动条；overflow属性有以下值：值visiblehiddenscrollautoinherit描述默认值。内容不会被修剪，会呈现在元素框之外。内容会被修剪，并且其余内容是不可见的。内容会被修剪，但是浏览器会显⽰滚动条以便查看其余的内容。如果内容被修剪，则浏览器会显⽰滚动条以便查看其余的内容。规定应该从⽗元素继承 overflow 属性的值。text-overflow确定如何向⽤户发出未显⽰的溢出内容信号。它可以被剪切，显⽰⼀个省略号（’…’，U + 2026 HORIZONTAL ELLIPSIS）或显⽰⼀个⾃定义字符串。⼏种样式显⽰效果如下：⼏种⽰例情况如下：CSS valuedirection: ltr预期结果实际结果1234567890direction: rtl预期结果实际结果1234567890visible overflow1234567890text-overflow: clip67890text-overflow: ''text-overflow: ellipsistext-overflow: '.'text-overflow: clip cliptext-overflow: clip ellipsistext-overflow: clip '.'text-overflow: ellipsis cliptext-overflow: ellipsis ellipsistext-overflow: ellipsis '.'text-overflow: ',' cliptext-overflow: ',' ellipsistext-overflow: ',' '.'123451234…1234.1234561234…1234.…3456…34……34.,3456,34…,34.67892345678923456789234567892345678923456789054321…4321.432…6543.…4321…43……43.,4321,43…,53.45678923456789234567892345678923456789white-spacewhite-space CSS 属性是⽤来设置如何处理元素中的空⽩。参数说明如下：normal连续的空⽩符会被合并，换⾏符会被当作空⽩符来处理。填充line盒⼦时，必要的话会换⾏。nowrap和 normal ⼀样，连续的空⽩符会被合并。但⽂本内的换⾏⽆效。pre连续的空⽩符会被保留。在遇到换⾏符或者元素时才会换⾏。pre-wrap连续的空⽩符会被保留。在遇到换⾏符或者元素，或者需要为了填充line盒⼦时才会换⾏。pre-line连续的空⽩符会被合并。在遇到换⾏符或者

元素，或者需要为了填充line盒⼦时会换⾏。break-spaces与

pre-wrap的⾏为相同，除了：任何保留的空⽩序列总是占⽤空间，包括在⾏尾。每个保留的空格字符后都存在换⾏机会，包括空格字符之间。这样保留的空间占⽤空间⽽不会挂起，从⽽影响盒⼦的固有尺⼨（最⼩内容⼤⼩和最⼤内容⼤⼩）。下⾯的表格总结了各种 white-space 值的⾏为：换⾏符normalnowrapprepre-wrappre-linebreak-spaces合并合并保留保留保留保留空格和制表符合并合并保留保留合并保留⽂字转⾏转⾏不转⾏不转⾏转⾏转⾏转⾏【参考链接】

2023年6月20日发(作者：)

HTML中限制字数显⽰HTML中限制字数显⽰，超出部分使⽤省略号显⽰在HTML中，为了保证页⾯整洁，需要隐藏超出部分的⽂本，例如列表项、标题等。如下为⼏种解决⽅法：代码实现⽂字只允许显⽰⼀⾏，省略超出部分，显⽰“…”在CSS⽂件中可以添加下述公共样式：.line-limit-length { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; //⽂本不换⾏，这样超出⼀⾏的部分被截取，显⽰...}在HTML中可以使⽤该样式：

给容器限制宽度，超出部分省略在CSS⽂件中添加下述：.product-buyer-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}使⽤⽅法和上⼀种⼀样。显⽰效果显⽰效果⼤致如下，该效果是美化后的显⽰效果：总结及进阶归纳起来设置的样式参数主要是三个：overflow: ⽤于控制内容溢出元素框时显⽰的⽅式。text-overflow: 确定如何向⽤户发出未显⽰的溢出内容信号。white-space: ⽤来设置如何处理元素中的空⽩。overflowCSS overflow 属性⽤于控制内容溢出元素框时显⽰的⽅式；可以控制内容溢出元素框时在对应的元素区间内添加滚动条；overflow属性有以下值：值visiblehiddenscrollautoinherit描述默认值。内容不会被修剪，会呈现在元素框之外。内容会被修剪，并且其余内容是不可见的。内容会被修剪，但是浏览器会显⽰滚动条以便查看其余的内容。如果内容被修剪，则浏览器会显⽰滚动条以便查看其余的内容。规定应该从⽗元素继承 overflow 属性的值。text-overflow确定如何向⽤户发出未显⽰的溢出内容信号。它可以被剪切，显⽰⼀个省略号（’…’，U + 2026 HORIZONTAL ELLIPSIS）或显⽰⼀个⾃定义字符串。⼏种样式显⽰效果如下：⼏种⽰例情况如下：CSS valuedirection: ltr预期结果实际结果1234567890direction: rtl预期结果实际结果1234567890visible overflow1234567890text-overflow: clip67890text-overflow: ''text-overflow: ellipsistext-overflow: '.'text-overflow: clip cliptext-overflow: clip ellipsistext-overflow: clip '.'text-overflow: ellipsis cliptext-overflow: ellipsis ellipsistext-overflow: ellipsis '.'text-overflow: ',' cliptext-overflow: ',' ellipsistext-overflow: ',' '.'123451234…1234.1234561234…1234.…3456…34……34.,3456,34…,34.67892345678923456789234567892345678923456789054321…4321.432…6543.…4321…43……43.,4321,43…,53.45678923456789234567892345678923456789white-spacewhite-space CSS 属性是⽤来设置如何处理元素中的空⽩。参数说明如下：normal连续的空⽩符会被合并，换⾏符会被当作空⽩符来处理。填充line盒⼦时，必要的话会换⾏。nowrap和 normal ⼀样，连续的空⽩符会被合并。但⽂本内的换⾏⽆效。pre连续的空⽩符会被保留。在遇到换⾏符或者元素时才会换⾏。pre-wrap连续的空⽩符会被保留。在遇到换⾏符或者元素，或者需要为了填充line盒⼦时才会换⾏。pre-line连续的空⽩符会被合并。在遇到换⾏符或者

元素，或者需要为了填充line盒⼦时会换⾏。break-spaces与

pre-wrap的⾏为相同，除了：任何保留的空⽩序列总是占⽤空间，包括在⾏尾。每个保留的空格字符后都存在换⾏机会，包括空格字符之间。这样保留的空间占⽤空间⽽不会挂起，从⽽影响盒⼦的固有尺⼨（最⼩内容⼤⼩和最⼤内容⼤⼩）。下⾯的表格总结了各种 white-space 值的⾏为：换⾏符normalnowrapprepre-wrappre-linebreak-spaces合并合并保留保留保留保留空格和制表符合并合并保留保留合并保留⽂字转⾏转⾏不转⾏不转⾏转⾏转⾏转⾏【参考链接】