简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > css教學 > 主體

如何利用CSS3截取字串

不言
發布： 2018-06-09 15:37:06
原創
2101 人瀏覽過

截取字串一般是用js或後台語言來實現，其實使用CSS也是可以實現此效果的。下面透過一段實例程式碼跟大家介紹CSS3截取字串的方法，需要的朋友參考下吧

截取字串一般是用js或者後台語言來實現，其實使用CSS也是可以實現此效果的。

程式碼實例如下:

<!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 color)

#

以上是如何利用CSS3截取字串的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
css3 截取字串
來源：php.cn
上一篇：CSS如何隱藏捲軸 下一篇：CSS中百分比的問題解析
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
使頁面適合行動裝置嗎？ 我有很多網頁和一些網站。問題是，我是一個初學者。我使用基本的html5和css3，但我不知道如何使它們放大、縮小並且適合行動裝置。例如，這是我的頁面之一和我的網站之一，您可以在其中...
來自於 2024-04-01 20:42:38
0
1
259
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！