文本只显示一行超出部分隐藏

文本只显示一行超出部分隐藏

给要一行显示的内容的容器加入以下属性：

  display: inline-block;//设置行内块属性white-space: nowrap; //强制不换行width: 100%; //固定盒子的宽度overflow: hidden;//超出部分隐藏text-overflow:ellipsis;//显示‘...’

演示：

上图为没有加一行显示属性，代码如下：

人生有伤，有痛，有甜更有苦。每一种创伤都是一种成熟，它使人思索，使人坚强，使人更懂珍惜。如果一个人没有品过苦，就难以生出慈悲心；如果一个人没有品过苦，就难以知道甜的滋味。勇敢的面对苦难，乐观的克服苦难，也是一种修行。没有永恒的夜晚，没有永恒的冬天，苦难终会过去，而阳光总在风雨后！

上图为加一行显示属性，代码如下：

人生有伤，有痛，有甜更有苦。每一种创伤都是一种成熟，它使人思索，使人坚强，使人更懂珍惜。如果一个人没有品过苦，就难以生出慈悲心；如果一个人没有品过苦，就难以知道甜的滋味。勇敢的面对苦难，乐观的克服苦难，也是一种修行。没有永恒的夜晚，没有永恒的冬天，苦难终会过去，而阳光总在风雨后！

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！