css文本省略和自适应宽度

最新推荐文章于 2024-07-10 11:57:20 发布
最新推荐文章于 2024-07-10 11:57:20 发布
阅读量279 收藏
点赞数
文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73075579/article/details/130405336
版权
本文探讨了如何使用CSS实现文本省略和自适应宽度的效果，适用于前端开发中的文本显示优化。通过示例代码展示了在Chrome浏览器中的实际运行结果。
摘要由CSDN通过智能技术生成

代码如下：

<template>
	<view class="body">
		<!--单行省略-->
		<view class="regular omit layout">{
  {str}}</view>
		<!--多行省略-->
		<view class="regular omitplus layout">{
  {str}}</view>
		<!--flex布局下，自适应宽度-->
		<view class="flex-col">
			<view class="regular omit">{
  {text}}</view>
			<view class="regularplus omit" style="margin-top: 30rpx;">{
  {text}}</view>
		</view>
		<view class="flex-row">
			<view class="regular omit">{
  {text}}</view>
			<view class="regularplus omit" style="margin-left: 30rpx;">{
  {text}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				str: "这里是需要省略的内容玛卡巴卡玛卡巴卡玛卡巴卡玛卡巴卡"
最低0.47元/天 解锁文章
栖柚与苏璃
关注
css实现文本超出显示省略号
风中追风
04-13 710
【代码】css实现文本超出显示省略号。
「省略…」中间文本自适应省略实现
筱筱_之家的博客
02-01 332
产生原因：公司现有需求要求有其中一段文本自适应，之前经验以为不管在什么布局里面，内容只要设置了宽度就一定会显示出来，事实证明，会被文本内容挤走，所以设置的父容器的宽度实质上只是容器宽度，而不是实质的内容宽度，举例如下： <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width=
【前端速记】CSS根据容器大小自适应省略文本
赶不上明天的博客
04-03 571
在做一个前端项目时，想要根据容器长度自适应地去省略文本，之前在编写的过程中解决类似需求都是使用js计算容器长度是否超过既定长度，这样很是麻烦，无意中发现了也可以用css快捷方便地实现这个小功能，故作此文速记。
css文字自适应宽度动态出现省略号...
最新发布
lemon今天学习了吗？的博客
07-10 599
在列表排行榜中通常会出现的一个需求：从左到右依次是名次、头像、昵称、徽标、分数。徽标可能会有多个或者没有徽标，徽标长度是动态的，昵称如果过长要随着有无徽标进行动态截断出现省略号。如下图布局所示（花里胡哨的底色是为了看的更清楚，咱忍忍。。。
css 自定义文字多行省略
weixin_43294560的博客
10-31 235
一个占位盒子：高度和要换行的高度相同（比如文字第三行高度为60px）一个省略内容的盒子
自适应宽度元素单行文本省略用法探究
weixin_30572613的博客
05-03 238
单行文本省略是现代网页设计中非常常用的技术，几乎每个站点都会用到。单行文本省略适用于显示摘要信息的场景，如列表标题、文章摘要等。在响应式开发中，自适应宽度元素单行文本省略容易失效不起作用，对网页开发这造成困扰。因此，本文将要要探究自适应宽度元素单行文本省略用法。现代浏览器都支持单行文本显示生省略号（...）样式，一般情况下，实现单行文本省略只需要给元素添加下面三个CSS样式： .d...
CSS如果实现文本超出一行或多行时显示省略号...
qq_21280835的博客
03-12 1344
如果使用css样式实现文本超出单行或多行显示省略号，具体方法如下↓。
设置单行文本溢出省略导致不能自适应宽度，white-space: nowrap
CNyuCHengrui的博客
03-07 1244
30秒讲完 通常需要设置文本溢出的地方使用这三句css white-space: nowrap; text-overflow: ellipsis; overflow: hidden; 并且设置一个宽度以后可以获得超过宽度的文本进行…省略 但是有时候会出现页面宽度变窄以后不能够使得元素自适应缩小 页面结构打乱 替代 可以将white-space: nowrap;text-overflow;删除 使用-webkit-line-clamp: 1; display: -webkit-box; -webkit-b
CSS超出文本指定宽度用省略号代替和文本不换行
09-24
总结，通过CSS的`text-overflow: ellipsis`、`overflow: hidden`和`white-space: nowrap`属性，我们可以有效地控制文本在指定宽度内的显示，避免文本换行并用省略号表示超出的部分。对于表格和多行文本，可能需要...
纯CSS定制文本省略的方法大全
09-24
【纯CSS定制文本省略的方法大全】 在网页设计中，有时候我们需要对长文本进行省略处理，以便在有限的...通过灵活运用CSS的浮动和`line-clamp`属性，我们可以实现高度自适应的多行文本省略，满足各种复杂的设计需求。
CSS省略号text-overflow超出溢出显示省略号
12-04
- 为了在多行文本中实现省略号效果，可以使用CSS3的`-webkit-line-clamp`属性，但这个属性是非标准的，只在Webkit内核的浏览器（如Chrome和Safari）中有效。对于跨浏览器兼容性，可能需要JavaScript或CSS预处理器的...
css实现一行显示省略号
百变鹏仔工作室
01-24 2397
请注意，该方法仅适用于文本内容超出容器宽度的情况，如果你需要对多行文本进行省略号显示，需要使用其他方法，例如。来实现一行显示省略号。当文本内容超出容器的宽度时，将超出容器宽度的文本用省略号代替，在 CSS 中，你可以使用。用于隐藏超出容器的内容。
CSS 适应页面宽度（防止页面宽度溢出或左右扩张）
z772330927的博客
05-16 3459
CSS 适应页面宽度 在制作页面时我们会遇到页面宽度溢出或者向左右扩张的问题，其中一个愿意是宽度没有设置，还有一种原因是用了padding导致页面宽度发生变化，在不同的分辨率中显示的样式可能是不一样的。在这里给大家推荐一个CSS的样式calc。按照你所需的宽度，减去你左右扩张的宽度。这个样式可以防止你的宽度溢出，让页面按照这个宽度自适应。 width: calc(100% - 40px); padding: 0 20px； ...
CSS单行省略和多行省略方法
weixin_34160277的博客
04-18 291
单行显示省略css样式：　　overflow: hidden;　　white-space: nowrap;　　text-overflow: ellipsis; 多行省略： 　　方法一、　　intwoline1{ 　　　　display: block; 　　　　display: -webkit-box; 　　　　max-width: 400px; 　　　　height:...
css为超过一定宽度的文本内容自动加上省略号
12-04 255
当在html中某个地方添加文本内容的时候如果内容过长我们会希望他超过一定宽度之后，其余的可以被截断，后面补充为省略号； 实现方式： 　　1、设置css样式为文本不换行； 　　2、位包裹文本的标签指定宽度； 　　3、设置自动隐藏超出的内容； 　　4、设置超出的文本使用省略号； CSS代码如下： 1 width: 200px; 2 overflow: hi...
css文字长度实现宽度自适应、显示三行超出省略号
DragonOfMoon的博客
04-08 5183
width 不设置默认宽度铺满全屏，如果要实现宽度随着文字长度自适应，css width:fit-content; 如果要实现文字自动换行，最多显示三行，超出显示省略号,以下这种效果的话 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-al
css实现单行文本超出隐藏和多行文本超出隐藏
HHYZBC的博客
10-06 1158
webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中；这种方法只有-webkit内核才有作用，而移动端浏览器绝大部分是WebKit内核的，所以该方法适用于移动端；
css小技巧：单行省略和多行省略
qq_45796592的博客
07-01 1554
单行省略和多行省略
flex 宽度自适应，文本溢出隐藏方法
qq_44767646的博客
07-14 3939
flex 宽度自适应，文本溢出隐藏方法 <div class="out"> <div class="left"> 我是图片 </div> <div class="right"> <p>我是文字我是文字我是文字我是文字</p> <div> </div> .out { display: flex; width: 200px; } .left { flex-shrink: 0; width:
flex自适应宽度显示省略号
06-02
可以使用CSS的`flex`布局以及`text-overflow`属性来实现自适应宽度显示省略号。具体实现如下： HTML代码： ``` 这是一段很长很长的文本，需要自适应宽度显示省略号。 ``` CSS代码： ``` .container { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值