我目前正在努力解决修剪面包屑导航的问题,因此它不会破坏我网站的设计.
问题如下:面包屑导航有一个固定的宽度(比如900px) - 所以,如果用户导航到一个位置导致面包屑大于900px的项目,我必须修剪它以适应设计.
所以,我遇到的部分就是:我怎样才能决定修剪多少和修剪的位置?我发现我可以修剪面包屑中间的文本溢出,这样就可以了
一些>导航>那> ...>>太>长
但是我怎么决定在哪里切?我怎样才能保留元素的锚点不被修剪?!
我真的坚持这个,是否有任何可接受的方式来处理这些问题?!
是否可以在textarea元素中获取文本的宽度?
我不想要$('textarea').val().length本身,因为它不依赖于font-size.
我更喜欢里面文字的绝对宽度.
我想获得textarea文本宽度.如何获得以像素为单位的文字宽度?
我不想要文字长度.
你知道我的意思?就像我们说的那样:
<div style="width:100px;font-size:10px">Some Text</div>
Run Code Online (Sandbox Code Playgroud)
但是那时我们也可能在div中有一个更长的文本字符串,在这种情况下我希望div具有font-size:7px或者其他什么,这样整个字符串就可以适应而不会溢出.
我敢肯定已经写过这样的东西了,我不想重新发明这个.最好是一个jQuery插件?
任何建议,将不胜感激!谢谢
我想使用CSS获得一个特定的布局,如下所示,我不确定它是否可行.div内部有一些文本居中.在下面,还有另一个带有文字的div; 我想要做的是右对齐此文本,使其右边缘与其上方文本的右边缘齐平.
使用CSS,我不知道如何做到这一点.显然,以下方法不起作用,因为子标题将右对齐容器.但是有什么技巧可以实现我想要的对齐吗?
<div style ='text-align:center;'>这是一些标题文字</ div>
<div style ='text-align:right;'>子标题文本</ div>
注意:强烈的偏好是直接CSS(如果可能,没有Javascript).
注意#2:我没有坚持使用上面的HTML.我可以使用任何完成描述对齐的标记.
我正在尝试找出一种在网络上以可变宽度字体显示吉他和弦的好方法,如果可能的话最好只使用 HTML 和 CSS。我试图通过将和弦排列在特定字母上方来做到这一点。
我想出了以下解决方案( https://jsfiddle.net/u33v87ob/):
HTML:
<div class="chunk">
<span class="chord"></span>
<br>
<span class="lyric">As </span>
</div>
<div class="chunk">
<span class="chord">C</span>
<br>
<span class="lyric">I was going over the </span>
</div>
<div class="chunk">
<span class="chord">Am</span>
<br>
<span class="lyric">far fam'd Kerry Mountains,</span>
</div>
Run Code Online (Sandbox Code Playgroud)
CSS:
.chunk {
float: left;
}
Run Code Online (Sandbox Code Playgroud)
从显示的角度来看,这非常有效。然而,搜索引擎是这样读取的,这意味着我失去了歌词的搜索结果:
As CI was going over theAmfar fam'd Kerry Mountains
Run Code Online (Sandbox Code Playgroud)
尝试复制+粘贴也会导致输出乱码。我宁愿复制的文本看起来像:
CAm
As I was going over the far fam'd Kerry Mountains,
Run Code Online (Sandbox Code Playgroud)
有什么方法可以实现这个目标吗?
编辑:对于后代,这里是原始问题的扩展,您一定要检查一下这个答案是否有帮助!
我在 Ionic3/Angular5 项目中使用 ng-select 并且我正在使用它的多选配置。选择输入的显示总是比包含所选项目或任何可用选项所需的要宽得多。
如果选择了任何一个可用选项,我希望它的宽度至少是组件将具有的最大宽度,否则宽度是包含主动选择的选项所需的任何宽度。
是否有可能让 ng-select 以这种方式表现?
css ×5
html ×4
javascript ×4
jquery ×2
width ×2
angular ×1
breadcrumbs ×1
layout ×1
navigation ×1
php ×1
seo ×1
textarea ×1
xhtml ×1