Question

我无法找到解决此问题的方法。

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

是否有可能只有一个<span>（或<p>或<div>）的精确渲染（每行的左右填充，每行之间的边距） <div>#container？

我想在左侧和右侧添加填充 - 每行所以，单词 consectetur 和做必须留下填充，单词 amet ， sed （和点））必须有正确的填充。

如果没有，是否可以使用CSS3，或者使用jQuery hack？

谢谢！

ps：抱歉，伙计们，我还不够清楚。我已经编辑了我的帖子。： - /

Answer 1

您可以将填充添加到#container，然后就完成了。

#container {
  width: 260px;
  margin-top: 30px;
  float: left;
  padding: 0 20px 0 20px;
}

请参阅：http://jsfiddle.net/M3SKj/1/

我认为，仅仅通过在容器元素上设置宽度来预期某些线制动是相当不可靠的。只是我的2cents。

Answer 2

将代码添加到#container span会解决您的问题吗？

display: block;

以下是您的代码 - http://jsfiddle.net/spacebeers/M3SKj/2/

Answer 3

我不认为这可以在CSS中完成，当然不能在CSS 2中完成，也可能不在CSS 3中。

单个范围内的单行是在应用框模型后由浏览器文本呈现引擎生成的 - 没有CSS选择器可以单独选择行。

实现你想要的唯一（**非常丑陋）方法是计算字符数，计算行长度并在计算行结束处插入html空格和<br>。

Answer 4

嗯，这是我的答案......

显然，在CSS中不可能这样做，所以我们必须找到另一种方法来分隔每一行。一种方法是稍微修改标记和样式表，并解析字符串以为每条渲染线创建一个跨度。

丑陋的代码：

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();

Answer 5

Yoshi是对的。但是，你也可以用Jquery来做。但你需要知道，这绝对不是优雅的解决方案。

 $(document).ready(function(){
    $('#container').css('padding', '0px 20px 0px 20px');
 });

啊，还需要从跨度中删除填充。如果你使用填充和边距，要小心，IE（6）有一个不同的box handling。

Answer 6

这是您更新的span

类

#container span {
  background-color: red;
  padding-left: 20px;
  padding-right: 20px;
  display:block;
}

如何只用一个SPAN为CSS2中的每一行添加填充（左和右）？整蛊？

6 个答案: