La détermination de la largeur d'une chaîne d'impression par une webapp
https://stackoverflow.com/questions/33893
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Dans mon (PHP) web app, j'ai une partie de mon site qui conserve un historique des dernières recherches.La plupart des requêtes récentes apparaissent dans une boite.Si le texte de la requête est trop longue, je le tronquer et de montrer des points de suspension.Par exemple:"Ma très longue question est..."
Actuellement, je tronquer après un certain nombre de caractères.Étant donné que la police n'est pas monotype, une requête de tout j'ai du est plus étroit qu'une requête de tous les W de.Je voudrais qu'ils tous être de la même largeur avant les points de suspension.Est-il un moyen pour obtenir la largeur approximative de la chaîne résultante de sorte que le bouton de sélection pour chaque chaîne aura lieu dans environ le même nombre de pixels depuis le début?Ne les CSS ont un sens?N'PHP?Serait-ce mieux géré par JavaScript?
La solution
Voici une autre de prendre sur elle et vous n'avez pas à vivre sans les points de suspension!
<html>
<head>
<style>
div.sidebox {
width: 25%;
}
div.sidebox div.qrytxt {
height: 1em;
line-height: 1em;
overflow: hidden;
}
div.sidebox div.qrytxt span.ellipsis {
float: right;
}
</style>
</head>
<body>
<div class="sidebox">
<div class="qrytxt">
<span class="ellipsis">…</span>
Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
</div>
<div class="qrytxt">
<span class="ellipsis">…</span>
Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
</div>
<div class="qrytxt">
<span class="ellipsis">…</span>
Short text. Fail!
</div>
</body>
</html>
Il n'y a qu'un seul défaut à cette fin, si le texte est assez court pour être entièrement affichée, les points de suspension sera toujours affichée aussi bien.
[EDIT:6/26/2009]
À la suggestion de Puissance-Coder, j'ai révisé un peu.Il ya vraiment seulement deux changements, l'ajout de la doctype (voir les notes ci-dessous) et de l'ajout de l' display: inline-block l'attribut de la .qrytxt DIV.Voici à quoi il ressemble maintenant...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
div.sidebox
{
width: 25%;
}
div.sidebox div.qrytxt
{
height: 1em;
line-height: 1em;
overflow: hidden;
display: inline-block;
}
div.sidebox div.qrytxt span.ellipsis
{
float: right;
}
</style>
</head>
<body>
<div class="sidebox">
<div class="qrytxt">
<span class="ellipsis">…</span>
Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
</div>
<div class="qrytxt">
<span class="ellipsis">…</span>
Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
</div>
<div class="qrytxt">
<span class="ellipsis">…</span>
Short text. FTW
</div>
</div>
</body>
</html>
Notes:
Vu dans IE 8.0, Opera 9, 3 FF
Un
doctypeest nécessaire pour IE pour obtenir ledisplay: inline-blockpour fonctionner correctement.Si l'
.qrytxtDIV de dépassement de capacité se produit sur un mot long, il va y avoir un grand écart entre les points de suspension et le dernier visible mot.Vous pouvez le voir en regardant l'exemple et le redimensionnement de votre navigateur largeur en petits incréments.(c'est probablement ce qui a existé dans l'exemple original en tant que bien, j'ai juste peut-être pas remarqué à l'époque)
Encore une fois, l'imparfait CSS seule solution.Javascript peut être la seule chose qui peut obtenir l'effet parfait.
[EDIT:6/27/2009]
Voici une autre alternative qui utilise le navigateur extensions spécifiques.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
div.sidebox
{
width: 26%;
}
div.sidebox div.qrytxt
{
height: 1em;
line-height: 1em;
overflow: hidden;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-ms-text-overflow:ellipsis;
-moz-binding:url(ellipsis-xbl.xml#ellipsis);
white-space:nowrap;
}
</style>
</head>
<body>
<div class="sidebox">
<div class="qrytxt">
Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
</div>
<div class="qrytxt">
Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
</div>
<div class="qrytxt">
Short text. FTW
</div>
</div>
</body>
</html>
Notez que pour l'exemple ci-dessus fonctionne, vous devez créer le fichier xml référencé par le-moz-binding règle, ellipsis-xbl.xml.Il doit contenir le fichier xml suivant:
<?xml version="1.0" encoding="UTF-8"?>
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<binding id="ellipsis">
<content>
<xul:window>
<xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
</xul:window>
</content>
</binding>
</bindings>
Autres conseils
Vous pouvez aussi très bien utiliser un peu de javascript:
document.getElementByID("qrytxt").offsetWidth;
vous donnera la largeur d'un élément en pixels et fonctionne même dans IE6.Si vous ajoutez une plage contenant des points de suspension à la fin de chaque requête d'une simple logique de test en JavaScript avec un peu de CSS de manipulation pourrait être utilisé pour cacher/montrer que nécessaire.
Ne les CSS ont un sens?
Pas de
N'PHP?
Pas de
-
Pour cela, vous auriez à obtenir les mesures de police pour chaque personnage, et de les appliquer à l'ensemble de vos lettres de votre chaîne.Alors que vous pourriez faire cela en utilisant un dessin/bibliothèque de rendu comme ImageMagick sur le serveur, il ne serait pas vraiment parce que les différents navigateur sur différents OS de rendu des polices différemment.
Même si elle a fait un travail, vous ne voulez pas le faire, parce qu'il serait aussi prendre une éternité à rendre.Votre serveur sera en mesure de pousser à 1 page par seconde (si) au lieu de plusieurs milliers.
Si vous pouvez vivre sans la fin ..., alors vous pouvez bien faux à l'aide de div les balises et les css overflow: hidden, comme ceci:
.line_of_text {
height:1.3em;
line-height:1.3em;
overflow:hidden;
}
<div class="line_of_text"> Some long text which will arbitrarily be cut off at whatever word fits best</div>
PHP doit être laissés de côté complètement dû au fait que même si il n'y est une fonction conçue pour la mesure de polices, http://www.php.net/imageftbbox , il n'existe aucun moyen pour le faire en PHP pour savoir si le visiteur a une taille de police minimale d'installation qui est plus grande que prévu taille de la police.
@Robert
que faire si vous mettez le bouton de sélection dans un div avec un faible z-index de sorte que quand il se déplace vers la gauche (pour les lignes plus courtes), elles sont recouvertes par une image d'arrière-plan ou quelque chose?
c'est assez hacky je sais, mais bon vaut la peine d'essayer de droite?
modifier Une autre idée:déterminer la position de la div contenant le bouton de sélection avec javascript, et si il n'est pas poussé tout le chemin droit, le cacher?
