最近搜索

css 样品大全

浏览:578
管理员 2022-08-28 03:49



字的间距

letter-spacing: 5px;



文字超过使用 省略号  代替。 还可以控制行。 


<style>
.text{
    color: #18191C;
    display: block;
    font-size: 15px;
    line-height: 19px;
    transition: color 0.3s;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    word-break: break-word;
    -webkit-line-clamp: 2;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
}
</style>
 
 
 
 
<body>
<div style="width: 200px;">
    <div class="text">
        在全球经济的大棋盘上,货币政策的每一次微调都可能引发连锁反应。近期,日本央行的加息决定引起了广泛关注,不仅因为这是17年来的首次,更因为它背后可能隐藏着美国对日本经济操控的更深层次线索。本文将深入剖析日元加息的背景,并探讨美国在其中可能扮演的角色。
    </div>
</div>
</body>

image.png



强制一行。超出使用... 省略号

   overflow: hidden;
   text-overflow: ellipsis;
  white-space: nowrap;
  这个强制一行,可能有问题,
<view style="display: flex;">
    <view style="width: 200rpx; background-color: chartreuse;"></view>
    <view style="flex: 1; background-color: coral;  ">
        <view class="temp_title">河南省平顶山 小明区农机配件小明区农机配件 </view>
    </view>
</view>
这个title就是使用的强制一行,超过使用...  强制一行如果字超过了。会占用左边空间。

可以换成不强制一行,定义他的高。超过隐藏。



css文字超出部分 自动换行

word-wrap:break-word
解释:使用break-word时,是将强制换行。


Css首行缩进2字符怎么设置

text-indent:28px;




css如何设置行距

可以使用
line-height:26px; 
属性来设置行间距,



绝对定位的使用  定位相对于谁。

<div style="  margin-top: 50px; position:relative;">
			<div style=" line-height: 30px; font-size: 18px; text-align: right; ">武汉商贸职业学院教务处</div>
			<div style=" line-height: 30px; font-size: 18px; text-align: right; ">2020年8月28日</div>
			<img style="position: absolute; top: -44px;   right: 32px;width: 155px;" src="/image/code/zhang.png" />
		</div>


联系站长

站长微信:xiaomao0055

站长QQ:14496453