在怎么用CSS做多行的文本溢出？是多行文本，不是单行的这样：overflow: hidden; text-overflow:ellipsis;

发布网友 发布时间：2022-10-27 22:55

我来回答

共4个回答

热心网友 时间：2023-09-30 10:10

这个事情只用CSS是解决不了的。
1、使用模板函数，比如Smarty就有这样的函数，可以截取部分内容显示，（但测试似乎对中文效果不好。）
2、使用服务器端程序，把文件切割后再显示。
3、使用JS来处理文字内容。
说个解决思路，你看看能不能给你一些参考：
单选CSS做文本溢出截取时，使用的就是overflow:hidden,然后再写一个<span>...</span>加在后面。这样只是隐藏了溢出的部分。多行的时候，是否能用绝对定位和层的概念实现这个。写一个内容只有<span>...</span>的层，绝对定位到父Box的右下角，问题是如果没溢出的话，就多了这个显示了。追问非常感谢你的回答，第1与第2种方法，是可以现实，但是我这个只做单纯的显示的网页页面，第三种方法我也想到过，这样做的话，...的层，是在第一行与第二行的右下角，他会突出出来，我想要的是，让第一行的宽包含，第二行的内容与省略号。谢谢！！

追答
文字部分。
...

我刚才试了一下，可以实现你的要求。
要注意的地方：
1、在父DIV中如果是英文要设置强制换行，中文最好也加上。
2、右下角显示...的Div一定要加上与父DIV相同的背景色，要不是文字重复，不是覆盖。

热心网友 时间：2023-09-30 10:10

1. 使用javascript截取文本固定长度的内容。
2. CSS设置显示指定的行

热心网友 时间：2023-09-30 10:11

css恐怕实现不了，你得用js 活Jquery控制。

热心网友 时间：2023-09-30 10:11

在段尾加<span>......</span>

热心网友 时间：2023-09-30 10:10

这个事情只用CSS是解决不了的。
1、使用模板函数，比如Smarty就有这样的函数，可以截取部分内容显示，（但测试似乎对中文效果不好。）
2、使用服务器端程序，把文件切割后再显示。
3、使用JS来处理文字内容。
说个解决思路，你看看能不能给你一些参考：
单选CSS做文本溢出截取时，使用的就是overflow:hidden,然后再写一个<span>...</span>加在后面。这样只是隐藏了溢出的部分。多行的时候，是否能用绝对定位和层的概念实现这个。写一个内容只有<span>...</span>的层，绝对定位到父Box的右下角，问题是如果没溢出的话，就多了这个显示了。追问非常感谢你的回答，第1与第2种方法，是可以现实，但是我这个只做单纯的显示的网页页面，第三种方法我也想到过，这样做的话，...的层，是在第一行与第二行的右下角，他会突出出来，我想要的是，让第一行的宽包含，第二行的内容与省略号。谢谢！！

追答
文字部分。
...

我刚才试了一下，可以实现你的要求。
要注意的地方：
1、在父DIV中如果是英文要设置强制换行，中文最好也加上。
2、右下角显示...的Div一定要加上与父DIV相同的背景色，要不是文字重复，不是覆盖。

热心网友 时间：2023-09-30 10:10

1. 使用javascript截取文本固定长度的内容。
2. CSS设置显示指定的行

热心网友 时间：2023-09-30 10:11

css恐怕实现不了，你得用js 活Jquery控制。

热心网友 时间：2023-09-30 10:11

在段尾加<span>......</span>