CSS3를 사용하여 문자열을 가로채는 방법
- 不言원래의
- 2018-06-09 15:37:062043검색
문자열 가로채기는 일반적으로 js나 배경 언어를 사용하여 구현됩니다. 실제로 이 효과는 CSS를 사용하여 얻을 수도 있습니다. 다음은 문자열을 가로채는 CSS3 방법을 소개하는 예제 코드입니다. 문자열 가로채기는 일반적으로 js 또는 배경 언어를 사용하여 구현됩니다.
코드 예는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>CSS教程-脚本之家</title>
<style type="text/css">
#first{
width:120px;
height:30px;
background-color:#F30;
overflow:hidden;
text-overflow:clip;
white-space:nowrap;
}
#second{
width:120px;
height:30px;
background-color:#F30;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
margin-top:10px;
}
</style>
</head>
<body>
<p id="first">脚本之家欢迎您，只有奋斗才会有美好的未来</p>
<p id="second">脚本之家欢迎您，只有奋斗才会有美好的未来</p>
</body>
</html>특별 참고 사항: white-space:nowrap 및 Overflow:hidden은 생략할 수 없습니다. 그렇지 않으면 가로채는 문자열이 유효하지 않습니다.
위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!
관련 권장 사항:
순수한 CSS를 사용하여 동적 텍스트 효과 얻기CSS 텍스트 글꼴 색상 설정 방법(CSS 색상)위 내용은 CSS3를 사용하여 문자열을 가로채는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS로 스크롤 막대를 숨기는 방법다음 기사：CSS로 스크롤 막대를 숨기는 방법