如何仅使用一个 SPAN 向 CSS2 中的每一行添加填充（左和右）？棘手？

发布于 2024-12-19 11:35:39 字数 1560 浏览 0 评论 0原文

我找不到解决这个问题的办法。

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

是否可以进行精确的渲染（填充每行的左和右，每行之间的边距）只有一个（或

，或

) 在

#container 中？

我想在每行的左侧和右侧添加填充。
因此，单词 consectetur 和 do 必须有左填充，单词 amet、sed （以及点) 必须有正确的填充。

如果没有，是否可以使用 CSS3 或 jQuery hack 来做到这一点？

谢谢你！

ps：抱歉各位，我说得不够清楚。我已经编辑了我的帖子。 :-/

原文

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. :-/

分享到QQ

分享到微博

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

发布评论

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

我不咬妳我踢妳 2024-12-26 11:35:40

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

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

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

另外我认为，这是相当不可靠的只需在容器元素上设置宽度即可实现某些换行符。只是我的2分钱。

You could add the padding to #container and you're done.

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

See: http://jsfiddle.net/M3SKj/1/

Also I think, it's rather unreliable to expect certain line-brakes, just by setting a width on a container-element. Just my 2cents.

回复收藏 0 原文

仅此而已 2024-12-26 11:35:40

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

display: block;

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

Does adding the code to #container span solve your problem?

display: block;

Here's your code with it in - http://jsfiddle.net/spacebeers/M3SKj/2/

回复收藏 0 原文

野稚 2024-12-26 11:35:40

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

单个跨度内的单行是在应用盒模型后由浏览器文本渲染引擎生成的 - 只是没有 CSS选择器单独选择行。

实现您想要的效果的唯一（**非常**丑陋）方法是计算字符数，计算行长度并在计算的行末尾插入 html 空格和。

回复收藏 0 原文

溇涏 2024-12-26 11:35:40

好吧，这是我的答案......

显然，在 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();

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 原文

○闲身 2024-12-26 11:35:40

Yoshi 是对的。但是，您也可以使用 Jquery 做到这一点。
但你需要知道，这绝对不是一个优雅的解决方案。

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

啊，还需要从跨度中移除填充。
如果您使用填充和边距，请小心，IE(6) 有不同的框处理。

Yoshi is right.However, you can do it with Jquery too.
But you need to know, it's absolutely not elegant solution.

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

Ahh, and also need to remove the padding from the span.
And if you use padding and margin, be careful , IE(6) has a different box handling.

回复收藏 0 原文

傲娇萝莉攻 2024-12-26 11:35:40

这是您更新的 span 类

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

This is your updated class for span

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

回复收藏 0 原文

贱人配狗天长地久 2024-12-26 11:35:40

现在可以通过在文本部分使用 display: inline-block; 轻松解决这个问题。

回复收藏 0 原文

~没有更多了~

关于作者

一念一轮回

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

如何仅使用一个 SPAN 向 CSS2 中的每一行添加填充（左和右）？棘手？

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

发布评论

评论（7）

关于作者

相关话题

热门标签

推荐作者

爱人如己

萧瑟寒风

云雾

倒带

浮世清欢

撩起发的微风

友情链接

如何仅使用一个 SPAN 向 CSS2 中的每一行添加填充（左和右）？棘手？

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

发布评论

评论（7）

关于作者

相关话题

热门标签

推荐作者

爱人如己

萧瑟寒风

云雾

倒带

浮世清欢

撩起发的微风

友情链接

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