相关疑难解决方法(0)

使用JavaScript计算文本宽度

我想用JavaScript来计算字符串的宽度.这是否可以在不使用等宽字体的情况下实现?

如果它不是内置的,我唯一的想法是为每个字符创建一个宽度表,但这是非常不合理的,特别是支持Unicode和不同的类型大小(以及所有浏览器).

javascript textbox

435
推荐指数
10
解决办法
37万
查看次数

使用CSS,使用"..."表示溢出的多行块

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 ellipsis css3

301
推荐指数
10
解决办法
20万
查看次数

使用CSS截断长字符串:可行吗?

是否有任何使用纯HTML和CSS截断文本的好方法,以便动态内容可以适应固定宽度和高度的布局?

我已经截断由服务器端的逻辑宽度(即一个盲目猜测的字符数),但由于一个"W"是比更宽的"i"这倾向于是次优的,并且还需要我重新猜测(并保持调整)每个固定宽度的字符数.理想情况下,截断将在浏览器中发生,浏览器知道渲染文本的物理宽度.

我发现IE有一个text-overflow: ellipsis属性正是我想要的,但我需要这个是跨浏览器.这个属性似乎(有些?)标准但Firefox不支持.我发现各种 解决方法基础上overflow: hidden,但他们要么不显示省略号(我希望用户知道的内容被截断),或显示这一切的时候(即使内容没有截断).

有没有人有一个很好的方法来适应固定布局中的动态文本,或者是服务器端截断的逻辑宽度和我现在要获得的一样好?

css layout text truncate cross-browser

209
推荐指数
5
解决办法
14万
查看次数

跨浏览器多行文本溢出,省略了宽度和高度附加的省略号`<div>`

我为这个问题制作了一个图像,以便更容易理解.

是否可以在<div>具有固定宽度和多行的a 上创建省略号?

文本溢出

我已经在这里和那里尝试了一些jQuery插件,但找不到我正在寻找的那个.有什么建议?想法?

html javascript css jquery

168
推荐指数
7
解决办法
8万
查看次数

在div内仅包含两行内的文本

我想在特定宽度的div内只包含两行内的文本.如果文本超出两行的长度,那么我想显示elipses.有没有办法用CSS做到这一点?

例如

Sample text showing wrapping
of text in only two line...
Run Code Online (Sandbox Code Playgroud)

谢谢

html css

67
推荐指数
8
解决办法
18万
查看次数

CSS文本溢出省略号不显示

我有一个内部内容的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)

有人可以请帮助.我需要在红色轮廓范围内显示尽可能多的文本,同时在文本内容溢出容器时有省略号...

提前致谢

css ellipsis css3

15
推荐指数
1
解决办法
3万
查看次数

jquery按长度限制文本

我可以使用jQuery在一些字符后隐藏DIV中的文本吗?

到目前为止,我认为它会像这样 - jQuery将循环遍历文本,直到它达到一定数量的字符.然后它将DIV从该位置包装到文本的末尾,然后可以使用hide()方法隐藏它.我不知道如何插入包装文本.

任何其他方式也将受到赞赏.

谢谢.

css formatting jquery text

10
推荐指数
2
解决办法
4万
查看次数

如何截断div高度的文本?

我有一个高度为192px的div.我想截断div中的文本,并希望最终显示....现在由于文本较大,按钮正在剪切,如快照中所示.当我在其中添加html标签时会发生这种情况.

在此输入图像描述

有人可以帮忙吗?

html javascript jquery

8
推荐指数
1
解决办法
9620
查看次数

防止HTML浏览器剪切文本并显示1/2文本行

假设我的浏览器窗口高105像素,我显示一个文本块,其中每行文本高10像素 - 浏览器将在窗口中显示10行和1/2行(即底线将被垂直剪切).

有没有办法防止这种行为,只看到10行?

我想这样做的原因是我使用HTML小部件(UIWebView)来呈现一个将使用页面翻转范例显示的书.

注意:看起来@page规则可以帮助我实现这一目标,但它们似乎只适用于打印到打印机时.

html css epub

7
推荐指数
1
解决办法
1744
查看次数

如何进行文本溢出:两行省略?

我有一个容器,文本可以扩展为两行,高度为40px,字体大小为18px.当我做:

text-overflow: ellipsis;
white-space: nowrap;
Run Code Online (Sandbox Code Playgroud)

然后虚线显示正确但它在一条线上被切断.当我做的时候:

text-overflow: ellipsis;
Run Code Online (Sandbox Code Playgroud)

然后它正确地显示了2行,但最后没有"......".我如何实现这一点,以便它在第二行正确地使用两行和"......"?

css

7
推荐指数
2
解决办法
3万
查看次数

如何在Android股票浏览器中的只读输入字段上显示省略号?

如果文本太长,如何设置输入字段以显示省略号?输入字段是只读的,其宽度设置为100%.

这可能吗?如果没有,你如何在JavaScript中做到这一点?

注意:虽然这似乎适用于Chrome,但它无法在Android股票浏览器上运行.

我输入字段的当前css:

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Run Code Online (Sandbox Code Playgroud)

谢谢!

html javascript css

6
推荐指数
2
解决办法
3018
查看次数

在p标签的宽度内切片文本

我有一个p tag with fix width.如果一个长句话出现,那么该句子应该自动切片,如下图所示.

在此输入图像描述

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

在此输入图像描述

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

html javascript css jquery

0
推荐指数
1
解决办法
1656
查看次数

标签 统计

css ×10

html ×7

javascript ×5

jquery ×4

css3 ×2

ellipsis ×2

text ×2

cross-browser ×1

epub ×1

formatting ×1

layout ×1

textbox ×1

truncate ×1