问题

过多的文字会把盒子撑开，造成布局错乱。

解决

    .card-title {

        white-space: nowrap;

        text-overflow: ellipsis;

        overflow: hidden;

    }

效果

CSS - div中的文字不换行，超出宽度就用省略号表示的更多相关文章

  1. 在div中设置文字与内部div垂直居中

    要实现如图一所示的结果: html代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta ...

  2. 实现全屏轮播，并且轮播div中的文字盒子一直自动垂直居中

    效果如下: 直接上代码了: 说明:轮播图基于swiper.js,自行下载.css在最后 <!DOCTYPE html> <html lang="en"> & ...

  3. div中单行文字垂直水平居中

    1.div中单行文字垂直水平居中.条件:外层div高度已经给定.代码如下: 复制代码代码如下: <style type="text/css">.div3{border: ...

  4. css之div中纯文字单行和多行垂直居中

    先上效果图 <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

  5. css+div如何解决文字溢出

    看到标题你一定很轻易就会想到截断文字加“...”的做法.哈哈,就是这样.其实写这篇日志也只是把这样方法做个记录,因为似乎还有很多人不记得碰到这样的情况该如何处理. 首先,先解释一下,一般用div+cs ...

  6. 禁止鼠标多次点击选中div中的文字

    <!DOCTYPE html><html><head><meta charset="utf-8"><title>Fire ...

  7. 如何让div中的文字只显示一行，多余的文字隐藏并加上省略号（超链接形式）

    写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签  text-overflow  , ...

  8. css div中内容绝对居中（多行内容）

    div中的内容绝对居中(不适合IE6哦,IE6我已经不考虑了),直接看代码吧. <!DOCTYPE HTML> <html> <head> <title> ...

  9. div中让文字垂直居中

    在div中如何让文字垂直居中? 作者在刚接触web前端开发时就遇到了这个问题,一直没有记录下来,今天正好有空,便记录下来. 为了方便展示,我把style先直接写在了div里. 效果如下图所示: 图1. ...

随机推荐

  1. pymysql模块学习

    #Pymysql 用于连接mysql数据库 #连接数据库 data_ip = "192.168.34.128" data_name = "lch" data_p ...

  2. 【18】 递归 X的N次幂

    题目(我没想到这也能出成题目--) 实现函数double Power(double base, int exponent),求base的exponent次方.不得使用库函数,同时不需要考虑大数问题. ...

  3. jQuery jqgrid 应用实例

    1.html <div class="ibox-content"> <div class=\"jqGrid_wrapper\"> < ...

  4. Oracle用户权限授权以及索引、同义词、分区

    本文为原创,如需转载,请标明出处 http://www.cnblogs.com/gudu1/p/7601765.html ---- 用户权限 1.创建表空间 (创建用户之前需要创建表空间和临时表空间, ...

  5. k线生成模块

    1.支持任意周期K线. 2.支持K线偏移. 3.支持指数.主力. 4.支持文华商品指数. 默认支持的是:5秒.1分钟.3分钟.5分钟.日线. 时间:2010年到现在. 数据如下: 5秒线,大宗商品指数 ...

  6. windows下划分逻辑分区

    运行命令窗口后,我们输入命令"diskpart"回车! 然后我们在DISKPART>后面输入select disk 0 选择我们的硬盘,然后回车!当然如果你电脑上有好几块硬盘 ...

  7. el-popover 点击input框出现table表，可点击选中，可拼音检索完回车选中

    <template> <card> <el-popover placement="right" width="400" trigg ...

  8. 消息中间件之ActiveMQ

    一.什么是消息中间件(MQ) 1.1 为什么会需要消息队列(MQ)? 主要原因是由于在高并发环境下,由于来不及同步处理,请求往往会发生堵塞,比如说,大量的insert,update之类的请求同时到达M ...

  9. 2.10 webdriver中 js 使用

    来源: 使用Webdriver执行JS小结  http://lijingshou.iteye.com/blog/2018929 selenium常用的js总结  http://www.cnblogs. ...

  10. testng如何实现用例间依赖

    todo: 参考: https://www.cnblogs.com/znicy/p/6534893.html