使用css修剪字符串

时间:2014-07-08 12:55:12

标签: css

我想使用css修剪字符串。 例 我的字符串是

  

"谷歌你好吗"

我想获得输出

  

"喜"

获得前两个字母。使用Css是否可以修剪字符串。

7 个答案:

答案 0 :(得分:1)

虽然不可能使用CSS;但是你可以在理想状态下获得某种幻觉,这可能是这个解决方法适合你。我在这里使用text-overflow: ellipsis;  您可以查看 DEMO

<p>hi google how are you</p>

p {
    text-overflow: ellipsis;   /* IE, Safari (WebKit) */
    overflow:hidden;              /* don't show excess chars */
    white-space:nowrap;           /* force single line */
    width: 17px;  /*This property playing a major role just showing the first 2 letter*/
}

答案 1 :(得分:0)

CSS是一种描述页面元素样式的方法。您正在尝试使用一个框架来编辑页面内容,该框架的设计不会对页面内容产生任何影响,只会影响样式。

您应该考虑使用JavaScript来执行您想要的操作。在CSS中无法以这种方式格式化页面元素。

答案 2 :(得分:0)

AFAIK:在CSS中无法做到这一点。实现目标的唯一方法是使用一些脚本语言(例如JavaScript)。

答案 3 :(得分:0)

使用CSS无法做到这一点。

唯一可能的解决办法是将一个句子的其余部分包裹在一个范围内,并将其隐藏起来,如下所示:

<p>hi<span> google how are you</span></p>

span { display: none; }

或者你应该研究一下Javascript或PHP解决方案。

答案 4 :(得分:0)

CSS本身不是一种编程语言。

另一方面,对你有好消息。您可以使用JavaScript或jQuery等编程语言来完成此任务,甚至可以使用PHP或Ruby等后端编程语言。

CSS是一种用于以级联方式应用样式的语言,因此它被称为CSS(层叠样式表)。

只是为了给你一些建议,你想要完成的事情不会被称为trim。修剪是从字符串中删除不必要的空格,如下面的示例所示:JavaScript Trim() Function

您尝试完成的内容称为子字符串,在此处说明:JavaScript substring() Function

var str = "Hello world!";
var res = str.substring(0, 2);
/* Output: He  */

答案 5 :(得分:0)

我个人会用Javascript

来做这件事
var startText = "hi google how are you";
var endText = startText.substr(0, 3); 
// endText is now "hi"

答案 6 :(得分:0)

我不太确定您为什么要使用CSS(用JS或后端服务器端语言对此更有意义),我想这是因为您想使用一个目标屏幕尺寸完整的句子和另一个缩写的句子?如果是这样,可悲的是CSS无法做到这一点,但是您可以在HTML中完成类似的事情:

<span class="widescreen-span">[pull full string here]</span>
<span class="smallscreen-span">[trimmed string here]</span>

您实际上在HTML中同时拥有两组文本,但是我们将相应地显示和隐藏它们。

然后为每个屏幕尺寸都有一个样式表(有几种方法可以执行此操作...):

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

然后在widescreen.css中,您可以执行以下操作:

.widescreen-span { display:inline; }
.smallscreen-span { display:none; }

然后在smallscreen.css中,您可以执行以下操作:

.widescreen-span { display:none; }
.smallscreen-span { display:inline; }