通过更改容器的宽度来对齐文本
Posted
技术标签:
【中文标题】通过更改容器的宽度来对齐文本【英文标题】：justify text by changing the width of container 【发布时间】：2014-03-21 17:56:54 【问题描述】：我希望我的工具提示中的文本是合理的，但不是像在 css 中那样通过在单词之间留出很大的空格，而是通过调整容器宽度。
例如这里是工具提示
如果有很多文本，我不希望我的工具提示拉伸到 1000 像素，因此我将最大宽度设置为 300 像素。
通过设置最大宽度，如果我稍微加宽容器（在本例中为 15 像素），工具提示看起来很完美。
或者在某些情况下，我想缩小元素以使文本完全适合。
最好的方法是什么？
我能想到的最好方法是最后一句话，将其包裹在一个跨度中，测量到边缘的距离，如果它小于 50%，则加宽或缩小容器，直到容器的高度发生变化表示添加或删除行
【问题讨论】：
你在使用 jQuery（最大宽度意味着你是）？此外，如果您不添加空格，那么完全对齐的文本不太可能，除非行中单词的总长度都以相同的长度结束。您的公式听起来类似于 max-width 已经做的事情，即尝试获取尽可能多的单词以匹配长度，如果不匹配则换行。或者你想要一个算法来试验不同的长度来找到最优的？ @Tomas - 你的意思是这样吗 - jsfiddle.net/JrzY7 - ( 使用inline-block 将基于文本的宽度设置为max-width ，然后很可能text-align:center 如果它包装）？
按照您的描述计算 max-with http://jsfiddle.net/36pq2/
【参考方案1】：
获取您需要的字符串长度并应用所需的格式。
这是我所想的一个非常简单的例子。我希望我能详细说明，但你知道，有很多事情要做。希望对您有所帮助。
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="tooltip">
<p class="msg">Pork belly</p>
</div>
<div class="tooltip">
<p class="msg">Pork belly synth narwhal meggings next level before they sold out Carles mlkshk chia ***lyn</p>
</div>
<div class="tooltip">
<p class="msg">Wes Anderson literally flannel Godard letterpress. Pinterest Carles artisan, PBR whatever cray cliche sustainable banjo fanny pack occupy Bushwick. +1 cred disrupt, DIY you probably haven't heard of them slow-carb blog authentic Portland </p>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="behavior.js"></script>
</body>
</html>
CSS 。容器 宽度：600px； 边距：0 自动；
.tiny
width: 120px;
background: #369;
.medium
width: 360px;
background: #963;
.big
width: 600px;
background: #693;
JS
$(function()
$.each($('.tooltip'), function(index, val)
var msgLength = $('.msg',this).html().length;
if (msgLength <= 20)
$(this).addClass('tiny');
else if(msgLength <= 100)
$(this).addClass('medium');
else
$(this).addClass('big');
);
);
当然，如果您执行一个在将 de tooltip 注入 dom 后立即应用的功能会更好。 :)
只是想表明一些方向。
告诉我发生了什么。
【讨论】：
【参考方案2】：试试这个：http://jsfiddle.net/hLMkD/1/
它通过注入隐藏元素来获取字符串的实际宽度，然后如果它在delta定义的定义范围内，则将工具提示的宽度设置为实际字符串的宽度
$(document).ready(function()
$('.tooltip').each(function()
var $this = $(this);
var delta = 20;
// get the real width of the string
var $tester = $('<div class="tester" />').appendTo('body').text($this.text());
var stringWidth = $tester.width();
$tester.remove();
if($this.width()+delta > stringWidth)
$this.width(stringWidth);
);
);
希望我能帮上点忙，我认为需要一些摆弄，但它应该指向你的想法。
我仔细考虑了这一点，并指出，纯 CSS 解决方案可能就是您正在寻找的。您可以将工具提示设置为display:inline-block，因此它只占用文本需要的位置（这解决了您的缩小用例），然后将max-width设置为您想要的宽度.
再次检查http://jsfiddle.net/hLMkD/1/。
【讨论】：
【参考方案3】：这里是新人，但已经编码 20 年了。我的回答属于“也许不要那样做，试试这个”这一类。
您有什么特别的原因要如此仔细地自定义宽度吗？为特定文本获取所需的空间并不容易，尤其是在您必须支持多种浏览器和操作系统的情况下。
我最近不得不向 Microsoft Dynamics CRM 中的自定义网页添加工具提示。该页面是 ASP，默认工具提示很糟糕。我在 jquery 上玩了一阵子，却一无所获。
我从 MenuCool 中找到了 tooltip.js，并快速轻松地实现了它。免费试用，给老板看了。她喜欢它。一个域及其所有子域的许可证是 20 美元。
将 css 和 js 文件放到相应文件夹中并将它们添加到页面后，如下所示：
<script src="Scripts/tooltip.js" type="text/javascript"></script>
<link href="Styles/tooltip.css" rel="stylesheet" type="text/css" />
然后我可以像这样对弹出窗口进行编码：
onmouseover="tooltip.pop(this, this.value)"
简单，漂亮的弹出窗口。它看起来非常可定制，但我自己并没有为此烦恼。
【讨论】：
这个答案根本没有试图解决这个问题，甚至没有给出“不要那样做”的令人信服的理由：有几种方法（如其他答案所示) 确定系统可接受范围内的宽度。 OP 还可能有一个工具提示系统：将超过一半的帖子花费在您承认没有完全探索的付费工具提示插件上是题外话。关于可变宽度工具提示可能如何损害 UI 的建议，或解释此插件或其他插件如何帮助解决此问题将大大有助于使答案变得更好。 谢谢布赖恩。即使操作系统和浏览器已知，确定包含给定文本块所需的适当像素数也是极其困难的。我的专长不在 js 上，我修了一天，很高兴找到了一个工具，这意味着我可以停止修修补补。我会更加谨慎地发布，并会努力提供更好的建议。【参考方案4】：小提琴：http://jsfiddle.net/aslancods/jbGc6/7/
/* css */
body
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 12.6px;
// to make font proper
.tool-tip
display: inline-block;
word-break: break-all;
// tool-tip set to inline-block, so that it wraps text we can calculate text width
/* tip-span class is added after setting width to tooltip */
.tip-span:after
content: " "
.tip-span:last-child:after
content: ""
<div class="tool-tip" id="tip" >
Maecenas ultricies dolor id fringilla ornare.
Vestibulum quis semper quam,
</div>
<div class="invisible" id="invisible"></div>
/* JS */
//get text inside tool-tip
var arr = $('.tip')[0].innerHTML.split(/\s+/);
//wrap each word with span and append to tool-tip
for( i=0; i< arr.length; i++ )
html += "<span>";
html += arr[i];
html += "</span>";
$('.tip')[0].innerHTML = html;
// len = no: of words
// get total width of text by calculating total tool-tip width
var tip_width = $('.tip').width();
// find by which number, tip_width is divisible. it is the no of lines or no of rows of text
// calculate width
// width = ( tip_width + ( no:of words * ( width taken by a space ) ) ) / no: of rows
for( i=2; i< len; i++ )
if( ( tip_width % i ) == 0 )
setWidth = ( tip_width + (len * spaceWidth) ) / i;
if( setWidth <= 300 ) // rows will choosen if it is lesser than 300
console.log( i )
break;
//set width to tool tip
tip.css( 'width': setWidth+'px' );
【讨论】：
以上是关于通过更改容器的宽度来对齐文本的主要内容，如果未能解决你的问题，请参考以下文章