问题

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

解决

    .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. JUC-LOCK接口

    Synchronized 1.多线程编程模版上 (1)线程 操作 资源类 (2)高内聚低耦合 2.实现步骤 (1)创建资源类 (2)资源类里创建同步方法,同步代码块 3.例子:卖票 LOCK 接口 锁 ...

  2. python：创建文件夹

    #!/usr/bin/python# -*- coding:utf-8 -*- import os dir = './dir'os.mkdir(dir)

  3. Energy Consumption Of Low-Pressure Crystal Craft Lights

    What kind of place is the low-pressure crystal light generally suitable for? Low-pressure crystal li ...

  4. C#获取当前不同网卡对应的iP

    C#获取当前不同网卡对应的iP: public string GetLocalIP() { IPAddress localIp = null; try { IPAddress[] ipArray; i ...

  5. ts中的类

    TypeScript 除了实现了所有 ES6 中的类的功能以外,还添加了一些新的用法(部分ES7). 一.ES6中类的主要用法: 1.使用 class 定义类,使用 constructor 定义构造函 ...

  6. 从bbs.3dmgame.com与qq的登录解析oauth2.0协议

    点击3dm上的qq图标,浏览器跳转到,地址为: https://graph.qq.com/oauth2.0/show ?which=Login &display=pc &respons ...

  7. ASP.NET + MVC5 入门完整教程五 --- Razor （模型与布局）

    https://blog.csdn.net/qq_21419015/article/details/80451895 1.准备示例项目 为了演示Razor,使用VS创建一个名称为“Razor”的新项目 ...

  8. AcWing 791. 高精度加法

    https://www.acwing.com/problem/content/793/ #include<bits/stdc++.h> using namespace std; vecto ...

  9. FastDFS ：java.lang.Exception: getStoreStorage fail, errno code: 28

    FastDFS 服务正常,突然报错:java.lang.Exception: getStoreStorage fail, errno code: 28 答:错误代码28表示 No space left ...

  10. ERROR EPERM: operation not permitted, mkdir 'C:\Users\Administrator\Desktop\text\nuxt\basic\.nuxt\components'

    C:\Users\Administrator\Desktop\text\nuxt>cd basic C:\Users\Administrator\Desktop\text\nuxt\basic& ...