通過web應用程序確定打印字符串的寬度

在我的（PHP）web應用程序中，我有一部分網站保留了最近搜索的歷史記錄。最近的查詢會顯示在旁邊框中。如果查詢文本太長，我會截斷它並顯示省略號。例如：「我很長的查詢是...」通過web應用程序確定打印字符串的寬度

目前，我截斷了一定數量的字符。由於字體不是monotype，所有I的查詢比所有W的查詢更窄。我希望它們在橢圓之前大致相同的寬度。有沒有辦法獲得結果字符串的近似寬度，以便任何給定字符串的橢圓將以大約相同數量的像素開始？ CSS有辦法嗎？ PHP是否？這會更好地處理JavaScript？

來源

2008-08-29 Dinah

這裏還有一個承擔它，你不必沒有省略號的生活！

<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">&hellip;</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">&hellip;</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">&hellip;</span> 
     Short text. Fail! 
    </div> 
</body> 

</html>

這裏有一個缺陷，如果文本足夠短，可以完全顯示，橢圓仍然會顯示。

[編輯：2009年6月26日]

當時我已經修改了這一點電編碼器的建議。實際上只有兩個更改，即doctype（請參見下面的註釋）的添加以及.qrytxt DIV上的display: inline-block屬性的添加。下面是它看起來像現在......

<!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">&hellip;</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">&hellip;</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">&hellip;</span> 
      Short text. FTW 
     </div> 
    </div> 
</body> 
</html>

注：

在IE 8.0，Opera 9中，FF 3看
需要IE瀏覽器doctype得到display: inline-block才能正常工作。
如果.qrytxt DIV的溢出發生在一個長單詞上，省略號和最後一個可見單詞之間會有很大差距。您可以通過查看示例並以較小的增量調整瀏覽器寬度來查看。（這可能在最初的例子也同樣存在，我只是可能沒有注意到它，然後）

如此反覆，一個不完美的只有CSS的解決方案。 Javascript可能是唯一可以獲得完美效果的東西。

[編輯：2009年6月27日]

這裏是使用瀏覽器的特定擴展另一種選擇。

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

注意，爲了讓上面的例子中工作，你必須創建由-moz-綁定規則，省略號，xbl.xml引用的XML文件。它應該包含以下XML：

<?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>

來源

2008-08-29 03:43:14

我喜歡這個答案，我們應該考慮用短文本問題的解決方法來更新它。我會看看我能做什麼。 – 2009-06-25 17:50:57

CSS有辦法嗎？

沒有

不PHP？

沒有

要做到這一點你必須得到每個字符的字體度量，並將它們應用到你的字符串中的所有你的信。雖然您可以通過使用服務器上的ImageMagick等繪圖/渲染庫來實現此目的，但它不會真正起作用，因爲不同操作系統的不同瀏覽器渲染字體的方式不同。

即使它確實有效，你也不想這樣做，因爲它也需要永遠渲染。你的服務器將能夠每秒推送1頁（如果是）而不是數千。

如果你生活中可以沒有結尾......，那麼你可以使用它div標籤和CSS overflow: hidden，這樣很好假：

.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>

來源

2008-08-29 03:05:07

@Robert

什麼，如果你把省略號在一個div與低z-index，這樣，當它移動到左邊（較短的線路），他們得到掩蓋由背景圖像或東西？

這很哈希我知道，但嘿值得一試的權利？

編輯另一個想法：用javascript確定包含橢圓的div的位置，如果不是一路推進，隱藏它？

來源

2008-08-29 04:06:21 Jiaaro

你也可以很容易地使用一些JavaScript：

document.getElementByID("qrytxt").offsetWidth;

會給你以像素爲元素的寬度，甚至在IE6工作。如果在每個查詢的末尾附加一個包含橢圓的span，可以使用一段簡單的JavaScript語言邏輯測試以及一些CSS操作來根據需要隱藏/顯示它們。

來源

2008-09-04 10:47:09

PHP應該完全沒有考慮到，因爲即使有一個專爲測量字體而設計的功能，PHP也無法知道訪問者是否具有較大的最小字體大小設置比預期的字體大小。

來源

2009-06-26 06:33:12 joebert

通過web應用程序確定打印字符串的寬度

回答

相關問題