In CSS3, rich text modification effects are added to make the web page more beautiful and comfortable. Commonly used CSS3 text properties are listed below:
CSS3 text properties
Description
text-overflow Text overflow processing
word-wrap Long words or URLs are forced to wrap box-shadow Adds one or more shadows to the boxword-break Specifies the processing method of automatic line wrappingIn CSS3, we can use the text-shadow property to achieve the shadow effect of text.
Syntax:text-shadow:x-offset y-offset blur color;##Description:
x-offset: (horizontal shadow) represents the horizontal offset distance of the shadow, the unit can be px, em or percentage, etc. If the value is positive, the shadow is offset to the right; if the value is negative, the shadow is offset to the left;
y-offset: (vertical shadow) represents the vertical offset distance of the shadow, the unit can be px , em or percentage, etc. If the value is positive, the shadow is shifted downward; if the value is negative, the shadow is shifted upward; blur: (blur distance) indicates the degree of blur of the shadow, the unit can be px, em or percentage, etc. . The blur value cannot be negative. If the value is larger, the shadow is blurrier; if the value is smaller, the shadow is clearer. Of course, if you don’t need the shadow blur effect, you can set the blur value to 0; color: (the color of the shadow) indicates the color of the shadow.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
p{
text-align:center;
margin:0;
font-family: helvetica,arial,sans-serif;
color:#999;
font-size:80px;
font-weight:bold;
text-shadow:10px 10px #333;
}
</style>
</head>
<body>
<p>Text Shadow</p>
</body>
</html>box-shadow propertyThe CSS3 box-shadow property in CSS3 is suitable for box shadow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div
{
width:300px;
height:100px;
background-color:red;
box-shadow: 10px 10px 5px blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Add a blur effect to the shadow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div
{
width:300px;
height:100px;
background-color:red;
box-shadow: 10px 10px 15px grey;;
}
</style>
</head>
<body>
<div></div>
</body>
</html>You can also add shadow effects to the ::before and ::after pseudo-elements
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
#boxshadow {
position: relative;
-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
padding: 10px;
background: white;
}
/* Make the image fit the box */
#boxshadow img {
width: 90%;
border: 1px solid #8a4419;
border-style: inset;
}
#boxshadow::after {
content: '';
position: absolute;
z-index: -1; /* hide shadow behind image */
-webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one half of the remaining 30% */
height: 100px;
bottom: 0;
}
</style>
</head>
<body>
<div id="boxshadow">
<img src="https://img.php.cn/upload/course/000/000/008/5801821694a3b224.jpg" alt="Norway" width="300" height="200">
</div>
</body>
</html>text-overflow attribute
text-overflow: Whether to use an omission mark (...) to mark the overflow of text within the object
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
.test_demo_clip{text-overflow:clip; overflow:hidden; white-space:nowrap; width:200px; height:50px; background:#ccc;}
.test_demo_ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px; height:50px; background:#ccc;}
</style>
</head>
<body>
<div class="test_demo_clip">
不显示省略标记，而是简单的裁切条
</div>
<br><br>
<div class="test_demo_ellipsis">
当对象内文本溢出时显示省略标记
</div>
</body>
</html>CSS3 line wrapword-wrap
If a word is too long to fit within a region, it extends outside:
In CSS3, the wrap property allows you to force text to wrap - even if that means splitting it a word in the middle:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
p.test
{
width:11em;
border:2px solid blue;
word-wrap:break-word;
}
</style>
</head>
<body>
<p class="test">
CSS3将完全向后兼容，所以没有必要修改的设计来让它们继续运作。
网络浏览器也还将继续支持CSS2。CSS3主要的影响是将可以使用新的可用的选择器和属性，
这些会允许实现新的设计效果（譬如动态和渐变），而且可以很简单的设计出现在的设计效果（比如说使用分栏）。
</p>
</body>
</html>CSS3 Word Break
CSS3 Word Breaking property specifies line breaking rules:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
p.test1
{
width:9em;
border:1px solid #000000;
word-break:keep-all;
}
p.test2
{
width:9em;
border:1px solid #000000;
word-break:break-all;
}
</style>
</head>
<body>
<p class="test1"> 为什么大罗如此让球迷念念不忘？我们喜爱一个球星或一支球队多少会有情愫寄托在内。</p>
<p class="test2"> 为什么大罗如此让球迷念念不忘？我们喜爱一个球星或一支球队多少会有情愫寄托在内。</p>
</body>
</html>