javascript - HTML 中文本的对齐

标签 javascript html css

有没有办法强制使用 CSS 将文本对齐到一行?例如:

I want to justify this text
like                   this
ButIdon'tmindifitsquashesit

我不需要别人告诉我在网页中调整文本是个坏主意(我有一个手动行间距和断字算法来协助),但我只是想知道是否有解决方案,CSS 或JavaScript,来处理这个。


抱歉,我的问题不是很清楚:每一行都在一个单独的 div 元素中,例如:

<div>I want to justify this text</div>
<div>like this</div>
<div>But I don't mind if it squashes it</div>

我知道 text-align: justify 但它并没有解决我的问题 — 它根据浏览器想要的方式进行对齐,而不是根据我拥有的每一行进行对齐。这可能会导致不适当的断行或右边缘不足。

最佳答案

您不能对齐单行文本。

但是,您可以组合一些可能对您有用的东西。

div{width:300px; 
    border:1px solid red;
    text-align:justify; text-justify: newspaper;
}

div:after{
    content: " &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
    line-height: 0;
    visibility: hidden;
}

http://jsfiddle.net/jasongennaro/zX9x5/1/

只有当您同意在内容下方多留一个空行时,这才有效。

边框只是为了查看间距等

H/T @thirtydot对于这个想法:Justify the last line of a div?

关于javascript - HTML 中文本的对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6760429/

相关文章:

javascript - 使用 ReduxReducer 修改嵌套状态

javascript - 如何在带有背景图像的 Canvas 中画一条线

javascript - 想了解为什么我的代码中的这个 "setInterval"不起作用?

html - 应用 border-radius 而不将它应用到 box-shadow

html - 边框长度小于 div 宽度?

javascript - 当鼠标经过按钮时,如何使用 onmouseover 和 onmouseout 隐藏和取消隐藏按钮?

javascript - 多维数组序列化

javascript - 如何验证两个对象数组

javascript - 如何使用 localStorage 中的数据渲染 React 组件?

jquery - 使用 jquery 更改多个对象