如何在HTML,CSS或JavaScript中将特定单词的文本段居中？

我有一个以页面为中心的段落,如下所示：

_________________________
|                         |
| Once upon a time,there |
|   lived a squirrel who  |
|  lived in the middle of |
|       the forest.       |
|_________________________|

我需要调整居中,使特定标记的单词在页面上水平居中.在此示例中,单词“who”居中：

_________________________
|                         |
|        Once upon        |
|  a time,there lived a  |
|  squirrel who lived in  |
|    the middle of the    |
|         forest.         |
|_________________________|

>在HTML中使用< div>标记的单词标签,即< center>曾几何时,有一只松鼠< div style =“居中”>谁< / div>住在森林中间.< / center>.
> HTML出现在一个应用程序中,我几乎无法控制编辑HTML本身(文本已经标记了CSS样式标记),但是可以修改样式表或向头部添加代码(如JavaScript)来修改风格呈现.

如何在HTML,CSS或JavaScript中的特定单词上居中？

解决方法

将特定目标词移动到词允许的最佳水平中心

您可以使用非常简单的JavaScript实现粗略的居中.它所做的只是沿着标记扫描,将它找到的第一个TextNode转换为用< span> s包裹的“单词”,然后插入换行符的试验和错误,直到它找到最接近目标单词的那个.中心.

在小提琴中,我用红色突出显示了代码认为应该有一个中断的跨度,以及目标单词的绿色.在大多数情况下,它确实很好,有一些情况下你最终可能会在一行中出现一个单词 – 但是,这可以通过将代码调整到确切的用例来解决.

Just in case people aren’t aware,this is an illustration of what can be achieved and is by no means perfect — no code ever is,because it can always be improved,and should be.

小提琴

http://jsfiddle.net/s8XgJ/2/

更新的小提琴,显示随机目标词的行为：

http://jsfiddle.net/s8XgJ/3/

标记

<center>
  Once upon a time,there was a squirrel who lived in the 
  <span class="centered">middle</span> of the forest. I 
  say middle,but without knowing where the edges were,the squirrel had no idea where the center was.
</center>

I have kept your mark-up roughly,however,as others have stated,you should avoid using the center tag. I have also converted the inner div to a span to preserve inline spacing. If this is not possible for you,you can still use a div,you’ll just have to override it’s normal display to be display: inline-block;

JavaScript / jQuery

jQuery.fn.findYourCenter = function( target ){
  base = $(this); target = base.children(target);
  base.contents().eq(0).each(function(){
    var i = -1,word,words,found,dif,last = Infinity,node = $(this),text = node.text().split(/\s+/),cwidth = Math.round(target.width() * 0.5),bwidth = Math.round(base.width() * 0.5),breaks = 2 // code will try to insert 2 line breaks
    ;
    node.replaceWith(
      '<span class="word">'+text.join(' </span><span class="word">')+' </span>'
    );
    words = base.find('.word');
    do {
      while ( ++i < words.length ){
        word && word.removeClass('clear');
        word = words.eq(i).addClass('clear');
        dif = Math.round(Math.abs((target.position().left + cwidth) - bwidth));
        if ( dif < last ) { last = dif; found = i; }
      }
      word.removeClass('clear');
      if ( found ) {
        words.eq(found).addClass('clear');
        i = found; found = word = null;
      }
      else {
        break;
      }
    } while ( i < words.length && --breaks );
  });
};

I have used jQuery for brevity.

CSS

你需要这个CSS项目：

.clear:after {
  content: '';
  display: block;
  clear: both;
}

如果您的.centered项目是< div>,则可能是以下内容：

.centered {
  display: inline-block;
}

然后你需要执行的是：

jQuery(function($){
  $('center').findYourCenter('.centered');
});

问题

为了使事情变得精确,你必须抵消某些东西 – 由于取决于单词的长度(和位置),你不能总是同时获得段落,行和目标词的完美中心.上面的代码仍然保持线为中心,代价是目标字被偏移.您可以改进上述内容,以便对包含目标跨度的线进行边距修改,如果您希望以线的成本居中.

目前,如果目标词出现在前五个单词中,则不太可能实现居中,主要是因为这种方法依赖于自动换行和换行.如果由于单词位于段落的开头而无法使用,则无法执行任何操作 – 除了引入边距,填充或文本缩进.

此代码依赖于能够读取< span>的位置.元素正确.旧版浏览器,例如IE6和早期版本的Safari / Opera都遇到了这个问题.

还有一点需要注意.此代码依赖于浏览器在同一个同步执行循环中立即重新计算其内部测量值.大多数现代浏览器似乎都这样做 – 在大多数情况下 – 但是您可能会发现需要实现setTimeout(func,0)或setImmediate延迟,以便在旧系统上运行.

……最后

这是一个相当疯狂的要求,究竟是什么呢？

如何在HTML,CSS或JavaScript中将特定单词的文本段居中？

解决方法

相关推荐