- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
需要阅读的内容很多,但如果您全部阅读,它应该是有意义的。
我正在开发一款要求用户在 iOS 上突出显示文本的应用。文本分为段落,有换行符和段落符,我决定只使用 <br />
换行符的标签,并开始一个新的 p
每个段落的元素。 Mobile Safari 的问题在于,当您选择的元素不是内联时,您无法单独选择字母。相反,尝试突出显示文本会突出显示段落的整个 block ,因为它是显示 block ..
为了解决这个问题,我决定用像这样的内联元素替换所有换行符 ( \n
):
.space{
height:0px;
display:inline-block;
width:100%;
}
所以 HTML 看起来像:
Line one
<span class="space"></span>
Line two
并且会输出为:
Line One
Line Two
我想,“干得好,你想通了!”
跳到今天,我发现这不是我想要的行为。由于用户突出显示的文本来自处理为纯文本的 PDF 文件,因此会出现如下情况:
Hello there, this is a paragraph and\n
it is continuing onto the next line and this line will continue and be wrapped by the set width of the parent
我将处理为
Hello there, this is a paragraph and
<span class="space"></span>
it is continuing onto the next line and this line will continue and be wrapped by the set width of the parent
输出为
Hello there, this is a paragraph and
it is continuing onto the next line and this line will continue and be wrapped by the set width of the parent
那显然不好!现在有一个全新的“段落分隔符”,应该有一个“换行符”。所以,我想我会创建两个不同的内联“中断”类,一个用于单个空格,一个用于双空格。
双空格元素的作用与上面的一样,而单空格元素只是将内容移到下一行。所以,这让我想到了我的实际问题:
此外,我无法将文本包裹在另一个元素中,例如 span
,所以我只能用CSS做一个内联换行元素和段落元素。
我尝试了一些事情来让它发挥作用。而不是设置 width
单个空间元素到 100%
就像我对双倍空间元素所做的那样,我可以改为计算容器的宽度和文本占用的宽度,然后将两者相减,得到剩余空间的宽度。这将允许我将内容推送到新行。
你可以在这里测试这个方法:http://jsfiddle.net/charlescarver/ksvkk/12/
此方法的问题在于,虽然我可以确定宽度,但无法确定多行文本节点的宽度。此外,如果容器大小发生变化,这也不灵活。
一个可能的想法是让单个空格元素具有 100% width
,但我无法开始工作。 ,并让文本推送它,以便将换行符向下推送到下一行。就像我说的,我无法让它工作。
最佳答案
这似乎为内联中断提供了解决方案:http://codepen.io/pageaffairs/pen/oliyz
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
[data]:after {
content: attr(data);
white-space: pre;
height: 0;
}
.doublespace{
height:0;
display:inline-block;
width:100%;
}
</style>
</head>
<body>
<p>Hello there, this is a paragraph and <b data='
'></b> it is continuing onto the next line and this line will continue and be wrapped by the set width of the parent</p>
<p>Hello there, this is a paragraph and
<span class="doublespace"></span>
it is continuing onto the next line and this line will continue and be wrapped by the set width of the parent</p>
</body>
</html>
在这个例子中,只有文本被选中,而不是整个 block 。我没有在 iPhone 上测试过,但提供它以防万一,因为这是一个有趣的问题。
关于javascript - 内联换行符?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16754375/
我之前已经发布了一些这样的代码,试图在正确的位置获得侧边栏链接并以一种特殊的方式看起来,我决定朝着不同的方向前进。我现在需要的是知道我应该做什么来获得我在侧边栏旁边而不是下方标记为“内容”的 div。
我试图让多个 inline 和 inline-block 组件在 div 中垂直对齐。这个例子中的span怎么就非要往下推呢?我已经尝试了 vertical-align:middle; 和 verti
我试图让多个 inline 和 inline-block 组件在 div 中垂直对齐。这个例子中的span怎么就非要往下推呢?我已经尝试了 vertical-align:middle; 和 verti
我试图让多个 inline 和 inline-block 组件在 div 中垂直对齐。这个例子中的span怎么就非要往下推呢?我已经尝试了 vertical-align:middle; 和 verti
我很困惑...所以我在容器中有一个 UL,当我更改 UL 上方的 DIV 时,它似乎会影响 UL 之后的流程...发生了什么事? DIV 是 block 元素,对吗?和 UL 一样,对吧? 所以在这个
我问这个基本问题是为了澄清事实。都提到了这个问题及其目前接受的答案,这是不令人信服的。然而,投票第二多的答案提供了更好的洞察力,但也不是完美的。。在阅读下面的内容时,请尝试区分内联关键字和“内联”概念
function roll_over(img_name, img_src) { document[img_name].src = img_src; } 我使用此代码来显示 T 恤并在鼠标悬停时显
是否可以在 AngularJS 表达式的内联 if 语句中包含多个语句?例如,以下失败: ng-change="someCondition() ? doA(); doB() : doC()" ng-c
我在 RStudio 中使用 R Markdown 创建一个混合 Markdown 和 R 输出的报告。我知道如何在 Markdown 中使用内联 R 表达式,但我想知道如何进行相反的操作,即在 R
我们无法将表单标签添加到内联 CKEditor来自 chrome 和 IE,但它在 Firefox 中运行良好。如果我们将表单添加到内联 CKEditor,它会删除表单标签。 例如:如果我在 Fire
在我的 HTML 代码中,我有两个输入: Yes No 现在我有一个默认情况下的 div,因为它的样式显示内联,我希望当我单击“否”时,它会使其样式不显示,而"is"则会使其内联,所以我制作了此功
如何在 PowerShell 中创建带有内联 If 的语句(IIf,另请参阅: Immediate if 或 ternary If )? 如果您也认为这应该是 native PowerShell 函数
嗨。我在阅读以下问题后提出这个问题:Question_1和 Question_2 。 Question_1 没有任何合适的答案,Question_2 有替代解决方案,但不是完美的解决方案。 这里我有两
有人可以帮我解决以下语法或告诉我是否可行吗?因为我要修改 if ... else ... 条件。我不想在列表中添加重复的值,但我收到了 KeyError。 其实我不太熟悉这种说法: twins[val
有时我喜欢滥用 python 语法,特别是短的 if block : if True : print 'Hello' else : print 'Bye' 现在我尝试对函数定义做同样的事情: i
我在尝试将 Logo 容器底部对齐到零高度父级时遇到了问题。最好,我想用纯 CSS 来实现这一点。 在附带的 fiddle 中,我想让 control-group 的底部与零高度 panel 元素的顶
我需要内联编写 HTML 和 Javascript 代码,即在 HTML 正文中(需要显示一些随机整数值)我搜索了很多博客,但到目前为止没有找到任何帮助。请指教。 我想实现这个功能: Offer
好吧,这更多的是要求澄清 C++ 的一个特性是如何工作的,而不是一个是否可以的答案。我将从解释我遇到的问题开始,因为直接的答案是它不是一个很好的类设计。 我有一个类正在形成一个无法维护的 if 语句
我正在我的 C# 代码中获取一个数据库行。行包含 3 个不同的标志(3 列具有 true 或 false 值)。这些列中只有一列为真,这将决定该对象的类型。我如何在一行代码中确定该对象的类型。如果所有
在 CSS 中,我如何才能只将电话号码加粗,以便它与声明的其余部分内联,但电话号码是加粗的? 而不是在 HTML 中这样做: › Start posting jobs today– 0
我是一名优秀的程序员,十分优秀!