communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > 长字串变省略的css_html/css_WEB-ITnose

长字串变省略的css_html/css_WEB-ITnose

WBOY
Libérer： 2016-06-24 12:24:59
original
1167 Les gens l'ont consulté

很长的英文, 想在

或
中显示两行后出现省略,如:

Ford acolytes hauled the paper before the Ontario Press Council, charging that the Star’s use of unnamed sources was unethical and that the media’s focus on the issue was detrimental to the democratic life of the city.

在td里变成
Ford acolytes hauled the paper
before the Ontario Press Council...

如何能用CSS简单搞掂?

回复讨论(解决方案)

用javascript截字符串试试  
css里倒是有个类似的功能  不过好像在td里不怎么凑效

overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width:150px;

你这个css只能实现显示一行并省略, 我现在是就是用js插入
去实现, 但限制很大, 当div等宽度变了就麻烦了 

  <style type="text/css">    td    {      font-size: 12px;      overflow: hidden;      padding-left: 5px;      text-align: left;      text-overflow: ellipsis;      white-space: nowrap;      word-break: break-all;    }    table    {      table-layout: fixed;    }  </style>
Copier après la connexion

版主大大, 你这个也只是实现显示一行并省略

版主大大, 你这个也只是实现显示一行并省略

你想显示多行并省略？字符会自动换行的啊


自动换行自动换行自动换行自动换行自动换行自动换行自动换行自动换行

一般都是一行才显示省略号的，如果多行，你可以参考这个插件
http://tpgblog.com/2009/12/21/threedots-the-jquery-ellipsis-plugin/

多谢版主, 这个插件正是我要的功能

Étiquettes associées：
长字串变省略的css
source：php.cn
Article précédent：[求教]HTML5没有font标签用什么_html/css_WEB-ITnose Article suivant：我的一个小站.所有浏览器打开正常，360打开就异形。谢谢了?求1解决_html/css_WEB-ITnose
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
3
2207
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
11
2359
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1974
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1859
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1923
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal