如何利用CSS3截取字串-css教學-PHP中文網

首頁

web前端

css教學

如何利用CSS3截取字串

不言

Jun 09, 2018 pm 03:37 PM

css3 截取字串

截取字串一般是用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中文網！

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7859

Java教學

1649

CakePHP 教程

1403

Laravel 教程

1300

PHP教程

1242

Related knowledge

純CSS3怎麼實現波浪效果？（程式碼範例） Jun 28, 2022 pm 01:39 PM

純CSS3怎麼實現波浪效果？這篇文章就來跟大家介紹一下使用 SVG 和 CSS 動畫來製作波浪效果的方法，希望對大家有幫助！

巧用CSS實現各種奇形怪狀按鈕（附代碼） Jul 19, 2022 am 11:28 AM

這篇文章帶大家看看怎麼使用 CSS 輕鬆實現高頻出現的各類奇形怪狀按鈕，希望對大家有幫助！

css怎麼隱藏元素但不佔空間 Jun 01, 2022 pm 07:15 PM

兩種方法：1、利用display屬性，只要為元素加上「display:none;」樣式即可。 2.利用position和top屬性設定元素絕對定位來隱藏元素，只需為元素加上「position:absolute;top:-9999px;」樣式。

如何在Go語言中截取字串 Mar 13, 2024 am 08:33 AM

Go語言是一種強大且靈活的程式語言，它提供了豐富的字串處理功能，包括字串截取。在Go語言中，我們可以使用切片（slice）來截取字串。接下來，將詳細介紹如何在Go語言中截取字串，並附上具體的程式碼範例。一、使用切片截取字串在Go語言中，可以使用切片表達式來截取字串的一部分。切片表達式的語法如下：slice:=str[start:end]其中，s