1. 程式人生 > >利用css實現文字一行顯示不完時顯示省略號

利用css實現文字一行顯示不完時顯示省略號

程式碼:

<!DOCTYPE html>
<html>
  <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>
            RunJS 演示程式碼
        </title>
        <style>
            .gdou{
                width:200px;
                height:30px;
                background:pink;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
        </style>
  </head>
    <body>
 
        <div class='gdou'>
            這一行很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長的。
        </div>
  </body>
</html>

效果:

相關推薦

利用css實現文字一行顯示顯示省略號

程式碼:<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

TextView設定為只顯示一行文字顯示的用省略號替代

先看效果圖: TextView只顯示一行,對顯示不完的內容使用省略號替代。 就設定標記的2個屬性 android:lines="1"(設定文字最大的顯示行數) android:singleLin

css實現文字一行/兩行”顯示,超出部分省略號顯示

1.文字一行顯示: div { width: 150px; overflow: hidden; text-overflow: ellipsis; /* 文字超出部分省略號顯示 */ white-space: nowrap; /* 不

利用css實現文字超出N行之後顯示省略號css常用小知識點

css程式碼如下: text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-cla

css實現文字過長顯示省略號的方法

對象 tle div wid 表示 overflow 方法 clas 說明 <div class="title">當對象內文本溢出時顯示省略標記</div> 這是一個例子,其實我們只需要顯示如下長度: css實現網頁中文字過長截取... tit

html css實現文字水平垂直居中顯示

這幾天在工作中遇到了一個小問題:文字內容怎麼能在div裡水平垂直居中顯示呢?同時群裡的小夥伴恰巧也有提問這個問題的,所以我就總結了一下我知道的方法。 一、利用行高(line-height)和vertical-align配合實現 具體做法如下: html: <div clas

css實現文字垂直居中且自動換行,過多的文字顯示省略號

先貼個效果圖 可以看到,文字較少時可以垂直居中,文字多則換行,再多就顯示省略號 下面貼程式碼 <div class="scroll-row"> <di

css實現文字溢位顯示省略號

看到很多網站上的文章列表只顯示一部分,之後就是一個閱讀全文連結,或者是以一個省略號結尾。今天就說說單行文字,多行文字溢位時怎麼顯示省略號? 單行 overflow: hidden; white-space: nowrap; text-overflow:ellipsis; 多行 display: -we

設定div中文字超出自動換行和css實現文字超出N行之後顯示省略號

一、對於div強制換行 1.(IE瀏覽器)white-space:normal; word-break:break-all;這裡前者是遵循標準。 #wrap{white-space:normal; width:200px; } 或者 #wrap{word-break:bre

實現文字一行超出隱藏顯示以及強制長單詞換行

文字一行超出隱藏顯示 就是當你的文字字數過多超出容器的時候,讓你超出部分隱藏,並在尾部顯示省略號 首先寫一個p標籤,然後給他寫一個較長的文字 <p>這是有段很長很長

手機影音第十五天,利用service實現後臺播放音樂,在通知欄顯示當前音樂信息等

手機影音 第十五天 利用service實現後臺播放音樂 在通知欄顯示當前音樂信息。 代碼已經托管到碼雲上,有興趣的小夥伴可以下載看看 https://git.oschina.net/joy_yuan/MobilePlayer 先來一張目前的音樂播放器的效果圖,當播

CSS實現背景圖尺寸隨瀏覽器縮放而變化的兩種方法

簡單 fix chrom per 實現 瀏覽器 webkit 只需要 div 方法一. 把圖片作為background 有幾個CSS的屬性要提一下:background-size:cover,這個CSS3的屬性作用是把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區域,背景

web.xml中的dispatchservlet後,js,css,甚至gif都能正常顯示

startup view details article 的人 核心 默認 href com 這個可以說是很多初學Springmvc的人都會碰到一個令人頭痛的問題 那就是為什麽我配置好web.xml中的dispatchservlet後,js,css,甚至gif都不能正常顯示

利用css實現hover動態效果

idt form 想要 utf-8 屬性 doc lin linear nbsp .font em:hover { font-size: 2em } .font strong:hover { font-weight: normal } .font span:hover {

css 實現文字圖片垂直對齊

給圖片使用vertical-align:middle;就可以實現 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</

css實現文字左右無縫滾動

新需求為:提示文字左右滾動,使用者能點選按鈕關閉提示 查到<marquee direction="left" scrollamount="2" scrolldelay="0"></marquee>,使用發現無法實現無縫滾動。 想要只用css實現該功能,使用css3動畫

css限制文字行數且超出部分顯示省略號

實現方法: display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; 適用範圍: 因使用了WebKit的CSS擴充套件屬性,該方法適用於We

CSS實現文字兩端對齊

最近的專案遇到了這樣的需求:(要求標題部分不管文字多少,都必須兩端對齊) 如下圖: 當時也沒有多想直接使用‘&ensp;’進行代替,畢竟產品同學想快一點看到效果,不敢怠慢!不過到第二個頁面就傻眼了。 如圖: 這很明顯‘&ensp;’已經無法滿足我了,只好上&emsp;。 這裡簡

利用Python實現文字讀音器

本篇分享的是使用python3製作一個文字讀音器,簡單點就是把指定的文字文字轉語音說出來;做這麼個小工具主要是為了方便自己在平時看一些文章眼累的時候,可通過語音來幫助自己,當然如果你是小說迷,可以擴充套件成一個小說讀音器。 pip install pyttsx3 Python學習資料或者需要

利用css實現div背景顏色動態漸變

在做比較炫酷的現代風格網頁時,一個div的顏色可能是動態的,不斷變化的。下面來說一下這種效果是如何實現的。 用到的css方法: (1)linear-gradient:用於設定漸變的顏色:background: linear-gradient(90deg, #496eaa,