当前位置：文江博客话题详情

不同浏览器中文本的大小（宽度）

发布于 2024-12-10 20:22:01 字数 106 浏览 0 评论 0原文

我需要以精确的宽度将文本放入 div 框中。
有没有办法（例如使用 javascript）使文本在所有主要浏览器中看起来大小相同？
例如，如果文本不适合“div”框，则删除一些字母。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

仅一夜美梦 2024-12-17 20:22:01

只需将以下属性添加到您的 div 的 CSS 规则中：

overflow:hidden; text-overflow:ellipsis; white-space:nowrap;

您可以在此处查看此操作 (JSFiddle)。

Just add the following properties to the CSS rule for your div:

overflow:hidden; text-overflow:ellipsis; white-space:nowrap;

You can see this in action here (JSFiddle).

回复收藏 0 原文

蓝天白云 2024-12-17 20:22:01

首先，使用 css 设置字体和大小。那么你几乎总是有相同的宽度。

然后你可以添加overflow:hidden;到你的div，这样它就不会显示任何超出末尾的内容。

根据您执行此操作的方式，您可以使用填充和边距而不设置宽度，这样它将始终适合 div。尽管这可能不是您想要的。

回复收藏 0 原文

无所的.畏惧 2024-12-17 20:22:01

您可以使用 CSS 或 JavaScript 截断文本。这是我编写的一个简单的 JQuery 截断插件的示例，如果文本被截断，它允许“显示更多”链接：

$.fn.trunc = function(_break_at) {

    var _article = jQuery(this).text();
    var _leader = [];
    var _trailer = [];
    var _substr = _article.split(' ');
    $(this).wrapInner('<div class="long"></div>');

    $.each(_substr, function(i, data) {
        if (i < _break_at) {
            _leader.push(data);
        }
    });

    if (_substr.length > _break_at) {

        $('<div/>').addClass('short').html(_leader.join(' ')).prependTo(this);
        $('<span/>').appendTo('.long').addClass('toggle').html(' << Show less');
        $('<span/>').appendTo('.short').addClass('toggle').html('... Show more >>');

    }
    $('.toggle').click(function() {
        $('.short, .long').toggle('show');
    });
};

$(function() {

    // This is how you use it
    $('#article_body').trunc(2);
});

http ://jsfiddle.net/AlienWebguy/7ZamJ

You can truncate your text with CSS or with JavaScript. Here's an example of a simple JQuery truncation plugin I wrote which allows for a "show more" link if the text is truncated:

$.fn.trunc = function(_break_at) {

    var _article = jQuery(this).text();
    var _leader = [];
    var _trailer = [];
    var _substr = _article.split(' ');
    $(this).wrapInner('<div class="long"></div>');

    $.each(_substr, function(i, data) {
        if (i < _break_at) {
            _leader.push(data);
        }
    });

    if (_substr.length > _break_at) {

        $('<div/>').addClass('short').html(_leader.join(' ')).prependTo(this);
        $('<span/>').appendTo('.long').addClass('toggle').html(' << Show less');
        $('<span/>').appendTo('.short').addClass('toggle').html('... Show more >>');

    }
    $('.toggle').click(function() {
        $('.short, .long').toggle('show');
    });
};

$(function() {

    // This is how you use it
    $('#article_body').trunc(2);
});

http://jsfiddle.net/AlienWebguy/7ZamJ

回复收藏 0 原文

~没有更多了~