将CSS3中的每个单词大写

时间:2015-11-15 08:10:56

标签: javascript css css3

我从数据库中获取一个字符串,该字符串以大写格式存储,如THIS IS TEST,但我需要以大写格式This Is Test

显示它

我尝试将两个文本转换组合成小写并大写如下所示来获取此

<span class="lowercase capitalize">THIS IS TEST</span>

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

但它没有做好工作!能不能让我知道我做错了什么? 感谢

3 个答案:

答案 0 :(得分:1)

CSS无法选择文本节点,因此无法检测单词是否已启动。

CSS private $id; /** * @var string * * @ORM\Column(name="email", type="string", length=255) */ private $email; /** * @var string * * @ORM\Column(name="username", type="string", length=255) */ private $username; /** * @var string * * @ORM\Column(name="password", type="string", length=255) */ private $password; /** * @var string * * @ORM\Column(name="first_name", type="string", length=255, nullable=true) */ private $firstName; /** * @var string * * @ORM\Column(name="last_name", type="string", length=255, nullable=true) */ private $lastName; /** * @var string * * @ORM\Column(name="location", type="string", length=255, nullable=true) */ private $location; /** * @var string * * @ORM\Column(name="remember_token", type="string", length=255, nullable=true) */ private $rememberToken; /** * @var \DateTime * * @ORM\Column(name="created_at", type="datetime", nullable=true) */ private $createdAt; /** * @var \DateTime * * @ORM\Column(name="updated_at", type="datetime", nullable=true) */ private $updatedAt; /** * Get id * * @return integer */ public function getId() { return $this->id; } /** * Set email * * @param string $email * * @return users */ public function setEmail($email) { $this->email = $email; return $this; } /** * Get email * * @return string */ public function getEmail() { return $this->email; } /** * Set username * * @param string $username * * @return users */ public function setUsername($username) { $this->username = $username; return $this; } /** * Get username * * @return string */ public function getUsername() { return $this->username; } /** * Set password * * @param string $password * * @return users */ public function setPassword($password) { $this->password = $password; return $this; } /** * Get password * * @return string */ public function getPassword() { return $this->password; } /** * Set firstName * * @param string $firstName * * @return users */ public function setFirstName($firstName) { $this->firstName = $firstName; return $this; } /** * Get firstName * * @return string */ public function getFirstName() { return $this->firstName; } /** * Set lastName * * @param string $lastName * * @return users */ public function setLastName($lastName) { $this->lastName = $lastName; return $this; } /** * Get lastName * * @return string */ public function getLastName() { return $this->lastName; } /** * Set location * * @param string $location * * @return users */ public function setLocation($location) { $this->location = $location; return $this; } /** * Get location * * @return string */ public function getLocation() { return $this->location; } /** * Set rememberToken * * @param string $rememberToken * * @return users */ public function setRememberToken($rememberToken) { $this->rememberToken = $rememberToken; return $this; } /** * Get rememberToken * * @return string */ public function getRememberToken() { return $this->rememberToken; } /** * Set createdAt * * @param \DateTime $createdAt * * @return users */ public function setCreatedAt($createdAt) { $this->createdAt = $createdAt; return $this; } /** * Get createdAt * * @return \DateTime */ public function getCreatedAt() { return $this->createdAt; } /** * Set updatedAt * * @param \DateTime $updatedAt * * @return users */ public function setUpdatedAt($updatedAt) { $this->updatedAt = $updatedAt; return $this; } /** * Get updatedAt * * @return \DateTime */ public function getUpdatedAt() { return $this->updatedAt; } 属性仅作用于元素(text-transform)的开始或整体(capitalize)。但是您可以使用JavaScript方法来解决问题。

您可以在每个空格后拆分文本以检测单词,然后将其包装在uppercase/lowercase内。之后,使用CSS为每个<span>标记设置span

的样式

text-transform: capitalize
var text = document.getElementById('text').textContent.toLowerCase(); // Convert the sentence to lowercase

var newText = document.getElementById('new-text');
var word = text.split(' '); // Split sentence into an array of words

for (i = 0; i < word.length; i++) { // Access each element in word array
  newText.innerHTML += `<span class="capital">` + word[i] + ` </span>`;
}
.capital {
  text-transform: capitalize;
}

答案 1 :(得分:-1)

试试这个......

.example {
    text-transform:initial;
}

摆脱这个

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

当然会改变这个

<span class="lowercase capitalize">THIS IS TEST</span>

到此......

<span class="example">THIS IS TEST</span>

答案 2 :(得分:-1)

只需使用此功能即可完成---

删除类之间的空格,如下所示 -

.lowercase-capitalize {
 text-transform: capitalize;
}
<div class="lowercase-capitalize">this is test</div>