使用CSS处理标题过长,自动截断,兼容响应式布局

应用场景描述

例如PHP 从数据库读取一个商品,那么当商品标题很长的时候,很可能会影响页面布局。处理方法如下:

  • PHP 字符串截取
  • JS 字符串截取
  • CSS 属性处理(推荐)

CSS 属性处理方法

html代码片段

<li >
    <span class="cut">商品标题商品标题商品标题商品标题商品标题商品标题</span>
    <span style="float: right;">9秒前</span>
</li>

css样式代码

.cut{
    display: inline-block;        /*让span 标签变成行内标签但具有宽高属性*/
    white-space: nowrap;         /*文本不进行换行*/
    overflow: hidden;           /*隐藏溢出文本*/
    text-overflow: ellipsis;   /*多出文本使用 ....代替*/
    width: 7em;                /*自适应布局*/
}

CSS属性处理后效果:

原文地址:https://www.cnblogs.com/homehtml/p/12630297.html

时间: 2024-10-11 07:48:13

使用CSS处理标题过长,自动截断,兼容响应式布局的相关文章

CSS之响应式布局

响应式布局 外部link的max.css #left { width: 50%; height: 100px; background-color: #FF6600; float: left; } #right { width: 50%; height: 100px; background-color: #3565ff; float: left; } 外部link的min.css #left { width: 100%; height: 100px; background-color: #FF66

响应式布局中的CSS相对量

一个响应式布局,要能够根据设备屏幕尺寸的改变,动态的调整页面内容,展现不同的设计风格.在进行响应式的 CSS 代码编写过程中,经常会用到一些相对尺寸,以达到相对定位的目的.例如,常见的响应式布局中需要用到"自适应的图片"."流动布局"等技术. 体现在 CSS 代码编写上,就需要前端开发人员精准掌握特定属性的相对量表示方法.然而,其中一些相对量的计算方法很容易混淆. 本文在完整梳理全部 CSS 属性基础上,将其中的"相对单位.百分比相对量.数字相对量&quo

css响应式布局RWD

响应式布局结合了三大理念: 1)用于布局的弹性网络(百分比定义宽度) 2)用于图片和视频的弹性媒体 3)媒体查询 在布局中,需要注意的点有: 1)尽量用min-width/max-width,max-height/min-height代替width,height 2)尽量使用百分比,em为单位代替精确值 3)采用媒体查询 二.媒体查询 IE8以下不支持媒体查询,需要引入 <!-- if lte IE 8> <script src="response.min.js"&g

css响应式布局用法

1.使用内联样式的用法 在<head>标签中使用style,使用@media指定对应屏幕分辨率大小的样式 <head lang="en"> <meta charset="UTF-8"> <title>响应式布局示例</title> <style> @media screen and (min-width: 800px) { body { background-color: red; } } @m

CSS3的响应式布局Home / HTML/CSS / CSS3的响应式布局

做手机端网页需要用到响应式布局,首先需要再HTML文件头声明一下: 主要目的是宽度控制和禁止用户缩放,具体参数自己GOOGLE一下. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> 下面是CSS判断是PC端还是移动端其实很简单,用CSS3的媒体查询

css的响应式布局和动画

把响应式布局和动画放在一起写是因为他们有个共同点@符号 先讲讲响应式布局@media 响应式布局==曾经==非常的流行,这种布局方式可以做出一也兼容一切设备的页面,但是当页面的功能越来越多,css文件越来越大,兼容难度越来越大,js也会很难写,于是他们离开了历史的舞台, 如今流行的还是手机端一份,pc端一份,pc用css适配实现,但是pc的屏幕大小也有很大的区别,于是响应式布局==从适配手机pc转移到了适配各种pc屏幕大小上==,这就是所有pc的css框架都会有的栅格系统 栅格系统原理 /* 超

【逆战】CSS中的响应式布局

一.响应式布局: 在小型网站建设中,有运用一套代码代码来适应不同终端分辨率的需求,优点:节约制作时间.节约制作成本.便于维护等优点. CSS3利用媒体查询(media queries)即可针对不同的媒体类型定义不同的样式,从而实现响应式布局 .也可以针对不同的分辨率设置不同的样式. 1024分辨率以上:PC端  1024 ~ 768 : pad pro 768 ~ 450 : pad mini , mobile 横屏 450分辨率以下: mobile 竖屏 二.media的值以及用法: 1.me

(html+css)_移动端适配方案一(流式布局)

一.前言 二.主要内容 1.移动端面对的问题:因为手机屏幕和尺寸不一样,当我们用不同手机设备浏览的时候为了提高用户体验必须要做移动端适配 2.解决方案一: 流式布局 + viewport视口进行设置 流式布局:就是百分比布局,非固定像素,内容向两侧填充,理解成流动的布局,称为流式布局*/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

css模拟Bootstrap响应式布局——栅格

做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下,用的是max-width.min-width子元素的宽度设置为不同的百分比,模拟栅格的12列.把100划分12份,用浮动宽度超出会自动换行,下面是段代码,以后会认真学习bootstrap.加油!飞燕草 1 <style type="text/css"> 2 #containe