问题

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

解决

    .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. JS的冒泡事件

      在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的 ...

  2. AcWing 278. 数字组合 求方案数目

    //M看成背包容量,把每个数看成一个物品,Ai看成是体积 //目标:求总体积恰好为M的方案数目 #include <iostream> using namespace std; ; int ...

  3. 生成器和迭代器_python

    一.生成器简介(generator) 在进行较大数据的存储,如果直接存储在列表之中,则会可能造成内存的不够与速度的减慢,因为列表创建完是立即创建并存在的,而在python中生成器(generator) ...

  4. 关于按下ctrl+z后，之后的cin失效的问题

    下面这代码按下Ctrl+z结束while输入后,接下来的cin >> val2就无法输入了 #include <iostream> #include <vector> ...

  5. 题解【洛谷P3958】[NOIP2017]奶酪

    题面 题解 我们考虑使用一个并查集维护空洞之间的关系. 如果两个空洞能相互到达,那么它们的祖先也是相同的. 枚举从哪一个空洞开始,能否到达奶酪的上表面. 如果能到达就输出Yes,否则输出No. 注意开 ...

  6. xstart访问centos7

    参考文档:https://blog.csdn.net/wuzhimang/article/details/51523867

  7. Allegro 串扰仿真

    利用于博士的那个电路板,看一下cadence软件的串扰仿真,我们选取3跟信号线,见下图. U6.N3-R36-U7.56 U6.P3-R36-U7.54 U6.P2-R36-U7.53 下面启动sig ...

  8. codeforces 1288E. Messenger Simulator（树状数组）

    链接:https://codeforces.com/contest/1288/problem/E 题意:序列p的长度为n,初始序列为1 2 3 4 ...n,然后有m次操作,每次指定序列中一个数移动到 ...

  9. JavaScript对象之属性操作

    在js对象中,我们可以对对象属性进行操作. 上图的要点为:for-in会把原型链上的可枚举属性也列出来. 上图的要点为:可以使用逻辑运算符&&进行层层查找对象是否为undefined, ...

  10. Uncaught TypeError: Cannot read property 'addEventListener' of null

    <script type="text/javascript"> var body1=document.getElementById('#body') </scri ...