截断文本问题

wupengyu 发布于2019-08-05 17:47 / 1443人阅读

摘要：不会出现这种问题解决方案是对设置或或或属性加上或者之后可得到我们想要的效果原因大概是以及的默认宽度属性的问题。

单行文本截断

p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

多行文本截断

对于固定行高的文本框，我们可以使用纯 CSS 来截断，思路是使用 float 属性，让另一个元素覆盖掉最后的地方
效果图如下

为了方便理解，添加了背景色区分每一块


    
        Responsive layouts in material design adapt to any possible screen size. This UI guidance includes a flexible
        grid that ensures consistency across layouts, breakpoint details about how content reflows on different screens,
        and a description of how an app can scale from small to extra-large screens.

参考来源：

http://dev.mobify.com/blog/multiline-ellipsis-in-pure-css/

在 flexbox 中截断文本的问题


                
        blablablablablablablablabla...blablablablablablablabla
    
                
        blablablablablablablablabla...blablablablablablablabla

我们期望的效果是两个文本在同一行各占百分之五十，溢出的文本被 ...截断，但实际的效果是两段文字都在同一排完整的显示出来了。（Safari不会出现这种问题）

解决方案是对 .fc 设置 width（或 max-width 或 min-width）或 overflow 属性

加上

.fc {
    width: 50%;
}

或者

.fc {
    overflow: hidden;
}

之后可得到我们想要的效果

原因

According to a draft spec, the above text should not fully collapse when the flex container is resized down. Because .subtitle has a width of 100%, the min-width: auto calculation that flexbox makes says that its container should be larger than we want.

大概是 chrome、opera 以及 firefox 的默认宽度属性的问题。

参考：
Flexbox and Truncated Text

idc机房托管专线服务完美截断自动截断截断表截断文字

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/59930.html

如何对多行文本进行截断？

摘要：实现这个放在第一个说，因为这个可能是最简单的方法了，代码直接用控制行数，就可以达到目的，当文字超过三行的时候就会截断加上省略号。前言单行文字的截断非常简单，但是多行文字的截断可谓是非常头疼，刚学css时候就为了这个写了很多乱七八糟的代码，今天工作又遇到了这个需求...比较巧的是某公众号今天正好也推送了一篇如何设置截断的文章，心血来潮就自己将见到的各种方法总结下，也算加深记忆与理解。...

vspiders 2019-08-29 17:12 评论0 收藏0
如何对多行文本进行截断？

摘要：实现这个放在第一个说，因为这个可能是最简单的方法了，代码直接用控制行数，就可以达到目的，当文字超过三行的时候就会截断加上省略号。前言单行文字的截断非常简单，但是多行文字的截断可谓是非常头疼，刚学css时候就为了这个写了很多乱七八糟的代码，今天工作又遇到了这个需求...比较巧的是某公众号今天正好也推送了一篇如何设置截断的文章，心血来潮就自己将见到的各种方法总结下，也算加深记忆与理解。...

miguel.jiang 2019-08-23 12:50 评论0 收藏0
css垂直水平居中解决方案

摘要：写在前面垂直水平居中即垂直与水平方向上都要居中，也就是视觉效果中的，处于视图的正中间。我们把需要垂直水平居中的设置为。使用使块级元素垂直居中是很简单的。写在前面：垂直水平居中即垂直与水平方向上都要居中，也就是视觉效果中的，处于视图的正中间。下面，我们来讲讲几个css中常用的垂直水平居中的解决方案方法1: 1、把外层的div的显示方式设置为table，即display: table...

taoszu 2019-08-29 14:18 评论0 收藏0
使用CSS处理标题过长，自动截断，兼容响应式布局

摘要：应用场景描述例如从数据库读取一个商品，那么当商品标题很长的时候，很可能会影响页面布局。应用场景描述例如PHP 从数据库读取一个商品，那么当商品标题很长的时候，很可能会影响页面布局。处理方法如下： PHP 字符串截取 JS 字符串截取 CSS 属性处理（推荐） CSS 属性处理方法 html代码片段商品标题商品标题商品标题商品标题商品标题商品标题 9秒前 ...

weapon 2019-08-29 10:57 评论0 收藏0
使用CSS处理标题过长，自动截断，兼容响应式布局

摘要：应用场景描述例如从数据库读取一个商品，那么当商品标题很长的时候，很可能会影响页面布局。应用场景描述例如PHP 从数据库读取一个商品，那么当商品标题很长的时候，很可能会影响页面布局。处理方法如下： PHP 字符串截取 JS 字符串截取 CSS 属性处理（推荐） CSS 属性处理方法 html代码片段商品标题商品标题商品标题商品标题商品标题商品标题 9秒前 ...

y1chuan 2019-08-01 15:23 评论0 收藏0