HTML+CSS:移动端分辨率、视口、Flex布局、文字溢出显示省略号、溢出两行显示省略号

一、分辨率分类

  • 物理分辨率是生产屏幕时就固定的,它是不可被改变的
  • 逻辑分辨率是由软件(驱动)决定的

制作网页参考物理分辨率还是逻辑分辨率?

  • 逻辑分辨率

移动端主流设备分辨率
在这里插入图片描述

二、视口

使用meta标签设置视口宽度,制作适配不同设备宽度的网页

思考:默认情况下,网页的宽度和逻辑分辨率相同吗?

  • 不同,默认网页宽度是980px。
    在这里插入图片描述

解决办法:添加视口标签。

视口:显示HTML网页的区域,用来约束HTML尺寸
在这里插入图片描述

  • viewport:视口
  • width=device-width:视口宽度=设备宽度
  • initial-scale=1.0:缩放1倍(不缩放)
    在这里插入图片描述

三、Flex布局

Flex布局/弹性布局:

  • 是一种浏览器提倡的布局模型
  • 布局网页更简单、灵活
  • 避免浮动脱标的问题

作用

  • 基于 Flex 精确灵活控制块级盒子的布局方式,避免浮动布局中脱离文档流现象发生
  • Flex布局非常适合结构化布局

设置方式

  • 父元素添加 display: flex,子元素可以自动的挤压或拉伸

组成部分

  • 弹性容器
  • 弹性盒子
  • 主轴 使用 justify-content 调节元素在主轴的对齐方式
  • 侧轴 / 交叉轴
    在这里插入图片描述
    思考:网页中,盒子之间有距离吗?
    答:有。
  • 在Flex布局模型中,调节主轴或侧轴的对齐方式来设置盒子之间的间距。

3.1 justify-content 主轴对齐方式

修改主轴对齐方式属性: justify-content
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

justify-content: flex-end;
在这里插入图片描述

justify-content: flex-start;
在这里插入图片描述

3.2 align-items 侧轴的对齐方式

  • align-items(添加到弹性容器)
  • align-self:控制某个弹性盒子在侧轴的对齐方式(添加到弹性盒子)
    在这里插入图片描述
    在这里插入图片描述

3.3 伸缩比 flex:value;

  • flex : 值;
  • 取值分类
    数值(整数)

注意: 只占用父盒子剩余尺寸

在这里插入图片描述在这里插入图片描述

3.4 flex-direction 改变元素排列方向

使用flex-direction改变元素排列方向

  • 思考:Flex布局模型中,弹性盒子默认沿着哪个方向排列?
    答:水平方向。
  • 思考:如何实现内容垂直排列?
    主轴默认是水平方向, 侧轴默认是垂直方向
    修改主轴方向属性: flex-direction

在这里插入图片描述
在这里插入图片描述在这里插入图片描述

3.5 flex-wrap 弹性盒子换行

思考:默认情况下,多个弹性盒子如何显示?

  • 弹性盒子换行显示: flex-wrap: wrap;
  • 调整行对齐方式:align-content
    取值与justify-content基本相同

在这里插入图片描述在这里插入图片描述

3.6 文字溢出显示省略号text-overflow: ellipsis

一行文字溢出显示省略号

.orders .goods .txt {
    flex: 1;
    /* 溢出的时候显示省略号 */
    /* 因为弹性盒子的尺寸可以被内容撑开, 不换行的文字可以撑开这个盒子的尺寸 */
    width: 0;
}
.orders .goods .txt h5 {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

在这里插入图片描述

在这里插入图片描述

两行文字溢出显示省略号

在这里插入图片描述

  .ellipsis-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当在CSS中尝试设置元素内容超出部分显示省略号(`...`)时,如果效果不理想,可能是因为样式未正确应用或者存在一些兼容性问题。确保你遵循了以下几个步骤: 1. **`overflow`属性**:首先,你需要设置元素的`overflow`属性为`hidden`或`auto`来控制内容溢出。默认情况下,`overflow`是`visible`,文本会直接延伸到容器之外。 ```css .container { overflow: hidden; /* 或者 overflow: auto; 如果希望滚动 */ } ``` 2. **`text-overflow`属性**:接下来,启用`text-overflow`来指示何时显示省略号。如果设置了这个属性但依然看不到省略号,检查是否有其他更高的优先级声明覆盖了它。 ```css .container p { text-overflow: ellipsis; /* 显示省略号 */ white-space: nowrap; /* 阻止文字换行 */ } ``` 3. **`display`属性**:对于块级元素(如`<p>`),确保`display`不是`inline`,因为这会影响省略号的处理。 4. **`line-clamp`属性**:在某些情况下,特别是在移动设备上,你可以使用`line-clamp`来限制行数并显示省略号,但这在不同浏览器中的支持程度有限。 ```css .container p { display: -webkit-box; -webkit-line-clamp: 2; /* 设置行数 */ -webkit-box-orient: vertical; overflow: hidden; } ``` 如果你仍然没有看到省略号,可能是浏览器的版本、特定CSS选择器优先级或者兼容性问题导致的。确保测试在各种现代浏览器(包括IE/Edge、Chrome、Firefox、Safari等)上,以及跨设备和视口尺寸下。若问题依旧,请检查代码是否正确地包裹在包含样式的容器中,并确认没有其他潜在冲突。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值