我想用JavaScript来计算字符串的宽度.这是否可以在不使用等宽字体的情况下实现?
如果它不是内置的,我唯一的想法是为每个字符创建一个宽度表,但这是非常不合理的,特别是支持Unicode和不同的类型大小(以及所有浏览器).
同
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
Run Code Online (Sandbox Code Playgroud)
如果溢出,"......"将显示在行尾.但是,这只会在一行中显示.但我希望它以多行显示.
它可能看起来像:
+--------------------+
|abcde feg hij dkjd|
|dsji jdia js ajid s|
|jdis ajid dheu d ...|/*Here it's overflowed, so "..." is shown. */
+--------------------+
Run Code Online (Sandbox Code Playgroud) 是否有任何使用纯HTML和CSS截断文本的好方法,以便动态内容可以适应固定宽度和高度的布局?
我已经截断由服务器端的逻辑宽度(即一个盲目猜测的字符数),但由于一个"W"是比更宽的"i"这倾向于是次优的,并且还需要我重新猜测(并保持调整)每个固定宽度的字符数.理想情况下,截断将在浏览器中发生,浏览器知道渲染文本的物理宽度.
我发现IE有一个text-overflow: ellipsis属性正是我想要的,但我需要这个是跨浏览器.这个属性似乎(有些?)标准但Firefox不支持.我发现各种 解决方法基础上overflow: hidden,但他们要么不显示省略号(我希望用户知道的内容被截断),或显示这一切的时候(即使内容没有截断).
有没有人有一个很好的方法来适应固定布局中的动态文本,或者是服务器端截断的逻辑宽度和我现在要获得的一样好?
我想在特定宽度的div内只包含两行内的文本.如果文本超出两行的长度,那么我想显示elipses.有没有办法用CSS做到这一点?
例如
Sample text showing wrapping
of text in only two line...
Run Code Online (Sandbox Code Playgroud)
谢谢
我有一个内部内容的div,当它溢出时我需要省略号.我已经在其他元素上多次这样做了,但由于某种原因,这不符合预期.
另外,我white-space:nowrap;故意遗漏,因为内容然后没有突破到跨度内的下一行,因此我在省略号开始之前只看到2-3个单词.我希望文本跨越父容器的整个高度,然后为超出这些边界的内容启用省略号.
这是一个有效的演示:http://jsfiddle.net/sadmicrowave/DhkSA/
CSS:
.flow-element{
position:absolute;
font-size:12px;
text-align:center;
width:75px;
height:75px;
line-height:70px;
border:1px solid #ccc;
}
.flow-element .inner{
position:absolute;
width:80%;
height:80%;
border:1px solid blue;
top:0px;
bottom:0px;
left:0px;
right:0px;
margin:auto;
text-align:center;
}
.flow-element .long{
float:left;
height:50px;
width:100%;
line-height:12px;
border:1px solid red;
text-overflow:ellipsis;
overflow:hidden;
}
Run Code Online (Sandbox Code Playgroud)
HTML:
<a class='flow-element' style='top:100px; left:50px;'>
<div class='inner'>
<span class='long'>Box 1 and some other content that should wrap and do some other stuff</span>
</div>
</a>
Run Code Online (Sandbox Code Playgroud)
有人可以请帮助.我需要在红色轮廓范围内显示尽可能多的文本,同时在文本内容溢出容器时有省略号...
提前致谢
我可以使用jQuery在一些字符后隐藏DIV中的文本吗?
到目前为止,我认为它会像这样 - jQuery将循环遍历文本,直到它达到一定数量的字符.然后它将DIV从该位置包装到文本的末尾,然后可以使用hide()方法隐藏它.我不知道如何插入包装文本.
任何其他方式也将受到赞赏.
谢谢.
我有一个高度为192px的div.我想截断div中的文本,并希望最终显示....现在由于文本较大,按钮正在剪切,如快照中所示.当我在其中添加html标签时会发生这种情况.

有人可以帮忙吗?
假设我的浏览器窗口高105像素,我显示一个文本块,其中每行文本高10像素 - 浏览器将在窗口中显示10行和1/2行(即底线将被垂直剪切).
有没有办法防止这种行为,只看到10行?
我想这样做的原因是我使用HTML小部件(UIWebView)来呈现一个将使用页面翻转范例显示的书.
注意:看起来@page规则可以帮助我实现这一目标,但它们似乎只适用于打印到打印机时.
我有一个容器,文本可以扩展为两行,高度为40px,字体大小为18px.当我做:
text-overflow: ellipsis;
white-space: nowrap;
Run Code Online (Sandbox Code Playgroud)
然后虚线显示正确但它在一条线上被切断.当我做的时候:
text-overflow: ellipsis;
Run Code Online (Sandbox Code Playgroud)
然后它正确地显示了2行,但最后没有"......".我如何实现这一点,以便它在第二行正确地使用两行和"......"?
如果文本太长,如何设置输入字段以显示省略号?输入字段是只读的,其宽度设置为100%.
这可能吗?如果没有,你如何在JavaScript中做到这一点?
注意:虽然这似乎适用于Chrome,但它无法在Android股票浏览器上运行.
我输入字段的当前css:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Run Code Online (Sandbox Code Playgroud)
谢谢!
我有一个p tag with fix width.如果一个长句话出现,那么该句子应该自动切片,如下图所示.

所以这句话应该是这样的.

我试过很多Css选项,word-wrap and text-overflow但没什么用.有些会使宽度增加,有些则会产生其他问题.我也试过overflow:hidden,这隐藏了第二行,但没有添加...到第一行的末尾.