jquery 添加换行符和截断 +添加“...”在 x 个字符之后

发布于 2024-12-06 07:23:07 字数 622 浏览 3 评论 0原文

我正在尝试找出一种方法来完成两件事：

1. 4 个字符或第一个单词后换行。
2.截断+添加“...”（仅当字符数超过20个字符时）

示例：2008 WALKER STATION THE BRIDGE 1.5L

希望显示：
2008年
WALKER STATION ...

我需要 #1 每次都发生，但如果文本超过 20 个字符，则只需要 #2。

我已经用以下代码分解了该行：

$(window).load(function(){
    $(".wine-name").each(function() {
    var html = $(this).html().split(" ");
    html = html[0] + "<br>" + html.slice(1).join(" ");
    $(this).html(html);
});

HTML：

<div class="wine-name">2008 WALKER STATION THE BRIDGE 1.5L</div>

原文

I'm trying to figure out a way to accomplish 2 things:

1. A line break after 4 characters or first word.
2. Truncate + add "..." (only if the amount of characters exceed 20 characters)

Example: 2008 WALKER STATION THE BRIDGE 1.5L

Would like it to display:
2008
WALKER STATION ...

I need #1 to happen every time, but only #2 if the text is more 20 characters.

I've got the line breaking down with the following code:

$(window).load(function(){
    $(".wine-name").each(function() {
    var html = $(this).html().split(" ");
    html = html[0] + "<br>" + html.slice(1).join(" ");
    $(this).html(html);
});

HTML:

<div class="wine-name">2008 WALKER STATION THE BRIDGE 1.5L</div>

分享到QQ

分享到微博

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

发布评论

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

那片花海 2024-12-13 07:23:07

在这里：

$( '.wine-name' ).each( function () {
    var words, str;

    words = $( this ).text().split( ' ' );
    str = words.shift() + '<br>';

    while ( words.length > 0  && ( str.length + words[0].length ) < 24 ) {
        str += ' ' + words.shift();
    } 

    if ( words.length > 0 ) {
        str += ' ...';
    }

    $( this ).html( str );    
});

现场演示： http://jsfiddle.net/XpmpQ/1/

Here you go:

$( '.wine-name' ).each( function () {
    var words, str;

    words = $( this ).text().split( ' ' );
    str = words.shift() + '<br>';

    while ( words.length > 0  && ( str.length + words[0].length ) < 24 ) {
        str += ' ' + words.shift();
    } 

    if ( words.length > 0 ) {
        str += ' ...';
    }

    $( this ).html( str );    
});

Live demo: http://jsfiddle.net/XpmpQ/1/

回复收藏 0 原文

執念 2024-12-13 07:23:07

一种方法是使用：

var string, p1,p2,p3;

$('.wine-name').each(
    function(){
        string = $(this).text();
        p1 = string.substring(0,4);
        p2 = string.substring(5);
        if (p2.length > 20){
            p3 = p2.substring(0,19) + '...';
            p2 = p3;
        }
        newString = p1 + '<br />' + p2;
        $(this).html(newString);
    });

JS Fiddle demo。

One way of doing this is to use:

var string, p1,p2,p3;

$('.wine-name').each(
    function(){
        string = $(this).text();
        p1 = string.substring(0,4);
        p2 = string.substring(5);
        if (p2.length > 20){
            p3 = p2.substring(0,19) + '...';
            p2 = p3;
        }
        newString = p1 + '<br />' + p2;
        $(this).html(newString);
    });

JS Fiddle demo.

回复收藏 0 原文

酒中人 2024-12-13 07:23:07

好吧，你可以使用 text-overflow 属性以 CSS 方式设置它，该属性得到了很好的支持（但由于某些奇怪的原因不在 FF 中），具体取决于你的需要，CSS 方式（没有任何脚本））会完成这项工作，甚至更好。如果您不知道我在说什么，请通过搜索 text-overflow ellipsis 来查看 Google。

如果您已经知道这一点，很抱歉打扰，我只是指出了一个我认为会有所帮助的替代方案。

回复收藏 0 原文

星星的轨迹 2024-12-13 07:23:07

我想你正在寻找这样的东西：

var s = "2008 hello world";
// Find the index of the first space or use 4
var i = Math.min(4, s.indexOf(" "));
var part1 = s.substr(0, i);
var part2 = s.substr(i);
// Add ellipsis if part2 is longer than 5 characters
if (part2.length > 5) part2 = part2.substr(0, 5) + '..';
// Output for testing
alert('"' + part1  + '", "' + part2 + '"');

jsFiddle demo

I think you are looking for something like this:

var s = "2008 hello world";
// Find the index of the first space or use 4
var i = Math.min(4, s.indexOf(" "));
var part1 = s.substr(0, i);
var part2 = s.substr(i);
// Add ellipsis if part2 is longer than 5 characters
if (part2.length > 5) part2 = part2.substr(0, 5) + '..';
// Output for testing
alert('"' + part1  + '", "' + part2 + '"');

jsFiddle demo

回复收藏 0 原文

~没有更多了~