Home/ Questions/Q 6920275
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T10:07:35+00:00

I can’t find any solution to this problem. Here’s the render I want: http://jsfiddle.net/kQSxb/

  • 0

I can’t find any solution to this problem.

Here’s the render I want:
http://jsfiddle.net/kQSxb/

HTML: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
  <div id="wrapper">
    <div id="container">
      <span>Lorem ipsum dolor sit amet,</span>
      <span>consectetur adipisicing elit, sed</span>
      <span>do eiusmod tempor incididunt.</span>
    </div>
  </div>
</body>
</html>

CSS: 

#wrapper {
  width: 600px;
  height: 600px;
  background-color: #eeeeee;
  float: left;
}
#container {
  width: 500px;
  margin-top: 30px;
  float: left;
}
#container span {
  background-color: red;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 30px;
  margin-bottom: 3px;
  display: inline-block;
}

Is it possible to have this exact render (paddings left and right for each lines, margin between each lines) with only ONE <span> (or <p>, or <div>) in the <div>#container?

I want to add padding – to the left and to the right – each lines.
So, the words consectetur and do must have left padding, and the words amet, sed (and the dot) must have right padding.

If not, is it possible to do this with CSS3, or maybe with jQuery hack?

Thank you!

ps: sorry guys, I wasn’t clear enough. I’ve edited my post. :-/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well, here’s my answer…

    Obviously, it is impossible to do in CSS so we have to find another way to separate each lines.
    A way to do this is to modify a little bit the markup and the stylesheet and parse the string to create a span for each line rendered.

    Ugly code:

    String.prototype.spanify = function(nb_char) {
  var regex = '.{1,'+nb_char+'}(\\s|$)|\\S+?(\\s|$)';
  return '<span>' + this.match(RegExp(regex, 'g')).join('</span><span>') + '</span>';
};

$.fn.titleize = function() {
  var title = $(this).html();
  var title_calculated = '<span id="title" style="visibility: hidden; position: absolute;">' + title + '</span>';
  $('body').append(title_calculated);
  var width = $(this).html(title).width() - 20;
  var full_width = $('body').find('#title').width();
  $('#title').remove();
  var nb_lines = Math.floor(full_width / width);
  var nb_char_per_line = Math.floor(title.length / nb_lines);
  var new_title = title.spanify(nb_char_per_line);
  $(this).html(new_title);
}
$('.title').titleize();
    • 0