을 결정하는 폭의 인쇄 문자열하여 웹 애플리케이션

StackOverflow https://stackoverflow.com/questions/33893

  •  09-06-2019
  •  | 
  •  

문제

내(PHP)web app,내가 내 사이트의 일부는 기록을 유지의 최근 검색합니다.가장 최근 검색 표시 얻을 측 상자입니다.는 경우 쿼리를 텍스트가 너무 오랫동안,나는 자르고 타원.예를 들어:"나의 아주 오래 쿼리가..."

현재,저는 뒤에서 자르의 특정 번호를 자입니다.이 글꼴입니다하지 않는 모노,쿼리에는 모든 나의보다 더 좁은 쿼리의 모든 W 습니다.나는 그들처럼 모든 것에 대한 동일한 폭전 타원.이 있을 얻을 수 있는 방법에 대략적인 폭의 결과 문자열도록 타원에 대한 어떤 지정된 문자열이 발생할에 대해 동일한 수의 픽셀이 처음부터 다시 시작하시겠습니까?가 CSS 있는 방법은 무엇입니까?지 PHP?이 것은 더 나은 에 의해 처리됩 JavaScript?

도움이 되었습니까?

해결책

여기에는 다른 걸릴 그리고 당신은 살아야 하지 않는 없이 생략!

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

거기에 하나의 결함과 이 경우,텍스트가 충분히 짧은 완전히 표시되어,타원은 여전히 표시될 뿐입니다.

[편집:6/26/2009]

의 제안에 힘-Coder 가 개정이다.정말있는 두 변경,추가 doctype (아래 참고 참조)추가 display: inline-block 특성 .qrytxt DIV.여기에 무엇이 보이는 지금처럼...

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

Notes:

  • IE 에서 볼 8.0,오페라하 9,FF3

  • A doctype 에 필요한 IE 을 얻 display: inline-block 을 올바르게 작동합니다.

  • 는 경우 .qrytxt DIV 의 오버플로우 발생시에는 단어가 될 것입니다 사이의 다양한 차이 생략하고 마지막으로 볼 수 있는 단어입니다.당신이 볼 수있는 보면 예제 및 크기 조정이 귀하의 브라우저에서 폭 작은 증가합니다.(이것은 존재하에서 원래를 들어뿐만 아니라,나는 그냥할 수 있습이 발견되지 않음)

그래서 다시는,불완전한 CSS 유일한 솔루션입니다.Javascript 할 수 있는 유일한 것이 효과를 얻을 수있는 완벽합니다.

[편집:6/27/2009]

여기에 또 다른 대안을 사용하는 브라우저 특정한 확장자.

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

참고하기 위해서는 위의 예에서 작동하는 만들어야 합니다 xml 파일 참조-모즈무적인 규칙 ellipsis-xbl.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>

다른 팁

당신은 또한 매우 쉽게 사용 비트의 자바스크립트:

document.getElementByID("qrytxt").offsetWidth;

줄 것입니다 당신의 폭소를 픽셀도에서 작동 IE6.는 경우 추가 기간을 포함하는 타원의 끝에 각 쿼리에 단순한 논리적인 테스트에서 JavaScript 의 비트와 함께 CSS 조작에 사용될 수 있습 숨기기/표시으로 그들 필요합니다.

가 CSS 있는 방법은 무엇입니까?

No

지 PHP?

No

-

그렇게 당신을 얻을 수있 글꼴 메트릭을 위해 각 문자,그리고 그들을 적용하여 귀하의 모든 문자에서 당신의 문자열입니다.할 수 있는 하는 동안 이렇게 사용하여 그림/렌더링 도서관 같은 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>

PHP 남아 있어야의 고려사항이 완전히 사실로 인해도 수있는 기능을 측정하도록 설계된 글꼴 http://www.php.net/imageftbbox 방법이 없습니 PHP 는지 여부를 알 방문자는 최소 글자 크기를 설정하는 보다 더 큰 기대되는 글꼴 크기.

@버

무엇을 넣는 경우 타원에서 낮은 div z-index 그래서 그 때 그것은 왼쪽으로 이동(에 대한 짧은 선)들에 의해 덮여 배경 이미지 또는 뭔가?

그것은 꽤 해키지만 이봐 시도 가치가 있죠?

편집 또 다른 아이디어:의 위치를 결정 div 포함하는 타원 javascript 고 있지 않은 경우 모든 방법을 오른쪽 숨기?

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top