javascript - 比起长行更喜欢换行

我想控制文本在框中的显示方式，宁愿换行而不是长行，但仍然允许长行。

以下是一些示例：http://codepen.io/anon/pen/jiCxo




在＃1中，有一个“长”文本和长行。这就是我希望它表现出来的方式。
在＃2中，有一个短文本和一个长行。我不喜欢


我想要：


2就像＃3一样，而不必手动添加<br>。
对长文本和短文本使用相同的HTML和CSS。


另外，我希望第一行最短，而不是最后一行：http://codepen.io/anon/pen/irFcK。

有任何想法吗？

（如果我担心，仅使用CSS是不可能的，那么我对一个不错的JavaScript解决方案持开放态度）

最佳答案

我做了一个快速功能，该功能应该可以执行您想要的操作。我评论了一下，所以您知道发生了什么事。

$(".box h1").each(function() {
  // Check if one line
  if($(this).height() <= parseInt($(this).css('line-height'))){
    // Check if width is greater than %50 of parent
    if($(this).width() >= $(this).parent().width()/2){
      // Adjust width to put it on two lines
      $(this).width($(this).parent().width()/2)
    }
  }
});

编辑：

要使第一行比第二行短，您必须做一些复杂的事情。我使用this answer中的cut。这应该非常接近您想要的。

$(".box h1").each(function() {
  // Check if one line
  if($(this).height() <= parseInt($(this).css('line-height'))){
    // Check if width is greater than %50 of parent
    if($(this).width() >= $(this).parent().width()/2){
      // First find approximately where you want it
      place = Math.round($(this).val().length/2);         // Might need a parseFloat
      // Find nearest end of word in correct direction
      original = $(this);
      first = original.text(cut(place));

      end = first.val().length
      start = $(this).val().length - end
      second = $(this).substr(start,end)

      // Place a break tag in the middle to put it on two lines
      $(this).html(first + <br> + second)
    }
  }
});

切

function cut(n) {
    return function textCutter(i, text) {
        var short = text.substr(0, n);
        if (/^\S/.test(text.substr(n)))
            return short.replace(/\s+\S*$/, "");
        return short;
    };
}

此代码使用<br>分解两行（第二行较长）

编辑2：

如果没有<br>或其他添加新行的方法，则不可能使行长不同。如果您更喜欢它，我可以对其进行更改，以便它使用多个<h1>标签，我认为这些标签会自动将每个附加标签插入新行

关于javascript - 比起长行更喜欢换行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18704096/